CSSでテキストを複数行で省略するには
display: -webkit-box と -webkit-line-clamp を組み合わせ、指定した行数を超えたテキストの末尾を … で省略表示する基本形を示す。
実行確認済みは、ブラウザで実際に描画して見た目を確認したものである。
公開:
<div class="card"><p class="excerpt">カード型の一覧に載せる説明文は、長さがまちまちでも高さを揃えたい。行数で切ってしまえば、どれだけ長い文章が来てもカードの背丈は変わらない。この段落は 3 行を超えた分が省略される。ここから先は表示されないはずの文章である。</p></div>.card {
max-width: 320px;
padding: 12px 14px;
background: #f1f5f9;
border-radius: 6px;
font-family: system-ui;
}
.excerpt {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
margin: 0;
font-size: 14px;
line-height: 1.7;
}-webkit-line-clamp で残す行数を決め、display: -webkit-box と -webkit-box-orient: vertical で行数を数えられる箱にしたうえで overflow: hidden ではみ出しを切る。
3 つが揃って初めて指定行数で … が付くためである。
つまずき
-webkit-line-clamp だけを指定しても省略記号は出ない。
行数を数える対象になるのは display: -webkit-box かつ -webkit-box-orient: vertical の箱だけで、さらに overflow: hidden ではみ出しを切る必要がある。
display を flex や grid に変えた時点で効かなくなるので、クランプしたい要素そのものに -webkit-box を当て、レイアウトは親要素側で組む。
余白は外側の要素に持たせる
クランプする要素自身に padding を付けると、省略したはずの次の行の上端が下の余白から覗く。
overflow: hidden が切る基準はコンテンツボックスではなくパディングボックスで、padding-bottom のぶんだけ余分に見えてしまうためである。
上の例のように、余白と背景は外側の要素に持たせ、クランプする段落は margin: 0 の素の状態にしておく。
1 行の省略との使い分け
1 行だけで切るなら white-space: nowrap と text-overflow: ellipsis を使う別の書き方になる。
見出しのように必ず 1 行に収めたいものは 1 行の省略、カードの説明文のように数行は読ませたいものは行数指定のクランプ、と用途で選ぶ。
両者は指定するプロパティが重ならないため、混ぜて書いても意図した側だけが効くわけではない点に注意する。