【CSS】【line-clamp】指定した行数でテキストを省略表示する

こんにちは、Ryohei（@ityryohei）です！

本記事では、CSSのline-clampで指定した行数でテキストを省略表示する方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

line-clampとは

指定した行数でテキストを省略表示する場合はline-clampプロパティを使用します。line-clampプロパティは値に指定した数字の行数のみテキストを表示するwebkit系のプロパティになります。

line-clampはIE11では動作しないプロパティです。2022年6月でIE11が廃止となるため、WebサイトではIE11の廃止以降に使うことがおすすめします。

line-clampは値を指定するだけでテキストを省略表示することができる便利なプロパティですが、使用にあたっていくつかクリアしなければならない条件があります。

条件は下記の通りです。

• displayに-webkit-boxか-webkit-inline-boxが設定されている
• box-orientプロパティにverticalが設定されている
• overflowにhiddenが設定されている（推奨）

overflowについては必須ではないですが、hiddenではない場合は指定した行数より先にテキストが表示されてしまいます。そのためoverflowにhiddenを設定することを推奨します。

参考：https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-line-clamp

line-clampを使って指定した行数でテキストを省略表示する

前項の内容を参考に、line-clampを使って指定した行数でテキストを省略表示してみたいと思います。ブロック内に3行だけテキストが表示されるように値を設定してみましょう。

HTML

<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>

CSS

p {
    width: 200px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

実行結果

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

実行結果を確認すると、line-clampで指定した値のところでテキストが省略表示されていることがご確認いただけます。今後テキストの行数を指定したい場合はline-clampを使うことが主流になりそうですね。

最後に

2022年6月のIE11の廃止に伴い使用を躊躇していたCSSプロパティが一気に解放されます。すべてを使いこなすことは難しいですが、line-clampのようにこれまで無理くりスタイルを作っていた内容をシンプルに実装することができるようになれば、コーディングが楽しくなること間違いなしです。今後も使い勝手の良いCSSプロパティがあればご紹介していきたいと思います！

以上、CSSのline-clamを使って指定した行数でテキストを省略表示する方法のご紹介でした！