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

こんにちは、ryohei(@ityryohei)です!

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

CSSで指定した行数でテキストを省略表示したいんだけど、良い方法ないかな?

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

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

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が設定されている
  • overflowhiddenが設定されている(推奨)

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

参考: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を使って指定した行数でテキストを省略表示する方法のご紹介でした!

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら