記事一覧ページなどで、タイトルは1行、リード文は3行分表示させ、収まらないテキストは省略して、三点リーダー(…)を付けたいという場合があります。
-webkit-line-clampプロパティを使用すると簡単にできます！
実装サンプル
この4行をセットで指定するだけ。
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
/*表示行数を指定します。0より大きい値を指定*/
overflow: hidden;
HTML
<ul>
<li>
<h1>［省略無し］CSSで複数行のテキストを省略し末尾に三点リーダを付ける方法</h1>
<p>［省略無し］記事一覧ページなどで、タイトルは1行、リード文は3行分表示させ、収まらないテキストは省略して、三点リーダーを付けたいという場合があります。</p>
</li>
<li>
<h1 class="line-clamp line-clamp-one">［長い見出し：1行に省略］CSSで複数行のテキストを省略し末尾に三点リーダを付ける方法</h1>
<p class="line-clamp line-clamp-three">［長いリード文：3行に省略］記事一覧ページなどで、タイトルは1行、リード文は3行分表示させ、収まらないテキストは省略して、三点リーダーを付けたいという場合があります。</p>
</li>
<li>
<h1 class="line-clamp line-clamp-one">［短い見出し］タイトル</h1>
<p class="line-clamp line-clamp-three">［短いリード文］リード文</p>
</li>
</ul>
CSS
.line-clamp {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
/*1行に省略*/
.line-clamp-one {
-webkit-line-clamp: 1;
}
/*3行に省略*/
.line-clamp-three {
-webkit-line-clamp: 3;
}
注意点
-webkit-line-clampを指定した要素の内側にリンクを設定した場合、3点リーダ(…)にhoverが効かないので外側に指定しましょう。
<!-- -webkit-line-clampを指定した要素の中にリンク指定：hover効かない-->
<ul>
<li>
<h1 class="line-clamp line-clamp-one">
<a href="">⓸［長い見出し：1行に省略］CSSで複数行のテキストを省略し末尾に三点リーダを付ける方法</a>
</h1>
<p class="line-clamp line-clamp-three">
<a href="">［長いリード文：3行に省略］記事一覧ページなどで、タイトルは1行、リード文は3行分表示させ、収まらないテキストは省略して、三点リーダーを付けたいという場合があります。</a>
</p>
</li>
</ul>
<ul>
<!-- -webkit-line-clampを指定した要素の外にリンク指定：hover効く-->
<li>
<a href="">
<h1 class="line-clamp line-clamp-one">⓹［長い見出し：1行に省略］CSSで複数行のテキストを省略し末尾に三点リーダを付ける方法</h1>
<p class="line-clamp line-clamp-three">［長いリード文：3行に省略］記事一覧ページなどで、タイトルは1行、リード文は3行分表示させ、収まらないテキストは省略して、三点リーダーを付けたいという場合があります。</p>
</a>
</li>
</ul>
対応ブラウザ
主要ブラウザでサポートされています。
▼line-clampのサポート状況 | Can I use
https://caniuse.com/?search=line-clamp
参考サイト
こちらの記事を参考にさせていただきました。
▼Trimming Multi-Line Text in CSS | by Elad Shechter | Medium
https://elad.medium.com/trimming-multi-lines-in-css-5ae59d5e6d84▼-webkit-line-clamp – CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-line-clamp
