知っておくとかなり使える！複数行の文字を丸めるcssプロパティline-clamp

※本ページはプロモーションが含まれています

はじめに

あるブロック範囲内にテキストを収めたい場合、cssプロパティtext-overflow: ellipsis;を設定するとはみ出した文字は…（３点リーダー）として表示されます。

WordPressなどの記事の抜粋を表示するサイト制作の際にとても役にたつプロパティなのですがtext-overflow:ellipsis;は１行のテキストが対象になります。

１行ではなくて例えば３行（複数行）で収まるようにしたい場合はどうすればよいかというとline-clamp プロパティを使用します。

使用例

３行に丸めるコードのサンプルです。

HTMLとCSS

<div style="width:300px; border:solid 1px #999  ; padding: 10px;">
    <p class="line-clamp-3">これは３行以上になる場合は…（３点リーダー）で丸められます。記事抜粋文字列を決めれらた範囲で表示したいときにとても便利ですね</p>
</div>

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

結果

See the Pen Untitled by watashi-xyz (@watashi-xyz) on CodePen.

注意点

・上記のクラスにheightプロパティやpaddingプロパティを追加すると表示がおかしくなるため使用しないようにします。
・ベンダープレフィックスはまだ必要です。firefoxであっても”-webkit-“です。

最後に

WordPressの記事一覧ページでの抜粋文字など、文字をある長さで丸める場合はphpやjavascriptなどで文字数で指定する方法が主流でしたがこのline-clampを習得しておくと選択肢が増えてより思いどおりの見た目に近づけることができますね。とても便利です。

ちなみにベンダープレフィックス必須ですが対応ブラウザの範囲はかなり広いです。

▼Can I use（line-clamp）
https://caniuse.com/?search=line-clamp

今後、さらに進化していってもらいたいものです。