複数行かつ 溢れたら 3 点リーダーを付ける処理を CSS だけで実現したい

目次

はじめに

複数行かつ 溢れたら 3 点リーダーを付ける処理を CSS だけで実現する方法を解説します。

背景

overflow: hidden, whiteSpace: "normal"textOverflow: ellipsis を組み合わせると、溢れたら 3 点リーダーを付けることができます。
しかし、この方法は 1 行の場合でしか使用できません。意外と 2 行で省略したかったりする場面が多いのですが、CSS だけで実現するのは難しく JS で頑張って実装していました。

-webkit-line-clamp vs line-clamp

それを踏まえ、W3C では line-clamp プロパティが提案されています。一方、先行して Webkit 系で導入された -webkit-line-clamp というプロパティがあり、多くのサイトで紹介されています。
-webkit-line-clamp - CSS: Cascading Style Sheets | MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
W3C の仕様はまだ作業草案 (Working Draft) であり、ブラウザにはあまり実装されていません。また、仕様がまだまだ変わる可能性があるので、執筆時現在 (2022 年) は -webkit-line-clamp を使用してみます。ちなみに -webkit-line-clamp も後方互換性のため W3C に正式に定義されているため、しばらくは安心して使用できます。
CSS Overflow Module Level 3
https://www.w3.org/TR/css-overflow-3/
-webkit-line-clamp は非常に多くのブラウザでサポートされています。一方、少し古いブラウザではサポートされていないため注意が必要です。
サポートされていない場合、長い文字列が省略されないので大変なことになってしまいます。
CSS property: -webkit-line-clamp | Can I use... Support tables for HTML5, CSS3, etc
https://caniuse.com/mdn-css_properties_-webkit-line-clamp

サンプル

いつも忘れて毎回検索しているので、下記にサンプル置いておきます。
div {
  width: 300px;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  /* サポートされていない場合のフェールセーフ */
  max-height: 24px;
}

まとめ

  • ベンダープレフィックスが付いているプロパティが後方互換性のため仕様に登録されることを初めて知りました
  • 自分でプログラムを書いてブログに置いておくことで、安心していつでもコピペできるようになりました
  • バンコクの儀式的正式名称を知る切っ掛けとなった神動画 伊沢vs須貝(こっそり山本と通話中)(Youtube 音量注意)

シェア

Twitter
Facebook
はてブ
LinkedIn
LINE
Pocket