長いテキストを三点リーダーで省略する方法

2023年 3月16日　Posted　藤原(フロントエンドエンジニア)

普段見るニュースサイトやブログで、新着情報、一覧表示の長いテキストの文末を「…」の表示になっているのを見かけたことはないでしょうか？

• テキストが1行を超えたら三点リーダーの表示にしたい
• 複数行のテキストを指定の行数で三点リーダーの表示にしたい

そのような時にCSSだけで実装できると便利ですよね。実際どのようにやるのか試してみました。

テキストが1行のみのパターン

1行を超えたら三点リーダー「…」にしてみます。1行表示の場合は、text-overflow: ellipsis;を使用します。text-overflow は、はみ出たテキストをどのように表示させるかを設定できるプロパティです。ellipsisは省略符号「…」をつけてくれます。

表示例

HTML

<div class="oneline">
	<ul>
		<li>
			<p class="title">1行を超えたら省略したい</p>
			<p class="text">記事の詳細テキストです。1行を超えると省略されますよ。</p>
		</li>
	</ul>
</div>

CSS

.oneline ul li {
	list-style:none;
	width:400px;
	padding:0 30px 30px;
	border:1px solid #ccc;
	box-sizing: border-box;
	box-shadow: 0 0 5px rgb(0 0 0 / 15%);
}

.oneline ul li p.title{
	font-weight:bold;
	font-size:2.0rem;
}
.oneline ul li p.text {
	/* 文字をはみ出させるための記述 */
	overflow: hidden;
	white-space: nowrap;
	/* 文字がはみ出た時に三点リーダーにする */
	text-overflow: ellipsis;
}

テキストが複数行のパターン

例えば3行表示にしたい場合、どのように実装するのでしょうか。line-clampプロパティを使って「指定した行数に制限」します。3行表示の場合、-webkit-line-clamp: 3;を使用します。CSSのline-clampプロパティは行数で制御しますので、可変幅でも指定した行数で省略されます。

表示例

HTML

<div class="multipleline">
	<ul>
		<li>
			<p class="title">3行を超えたら省略したい</p>
			<p class="text">記事の詳細テキストです。「-webkit-line-clamp: 3;」に指定すると3行を超えると省略されますよ。3行を超えたら三点リーダーが表示されます。どうでしょうか？</p>
		</li>
	</ul>
</div>

CSS

.multipleline ul li {
	list-style: none;
	width: 400px;
	padding: 0 30px 30px 30px;
	border: 1px solid #ccc;
	box-sizing: border-box;
	box-shadow: 0 0 5px rgb(0 0 0 / 15%);
}

.multipleline ul li p.title{
	font-weight: bold;
	font-size: 2.0rem;
}

.multipleline ul li p.text {
	/*ここで行数の指定*/
	-webkit-line-clamp: 3;
	/*　おまじないのように書く三行
	　　displayプロパティをboxに。
	　　box-orientプロパティをverticalで、
	　　要素の配置方向（上から下へ垂直に積み重ねて表示）を指定。
	　　overflowプロパティをhiddenに。
	　　Flexコンテナとしてline-clampプロパティで行数を認識させる　*/
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

サポート状況

Can I Use（line-clamp）

まとめ

いかがでしたか？詳細テキストを「…」にすることで、この続きはなんだろうと下層のページを見てもらえるきっかけになるとうれしいですよね。ぜひ使ってみてください！