CSSで複数行のテキストを省略し末尾に三点リーダ(...)を付ける方法

記事一覧ページなどで、タイトルは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