💬

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

2023/02/19に公開

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 というプロパティがあり、多くのサイトで紹介されています。

W3Cの仕様はまだ作業草案 (Working Draft) であり、ブラウザにはあまり実装されていません。また、仕様はまだまだ変わる可能性があるので、執筆時現在 (2023年) は -webkit-line-clamp を使用してみます。ちなみに -webkit-line-clamp も後方互換性のためW3Cの草案に正式に定義されているため、しばらくは安心して使用できます。

-webkit-line-clamp は非常に多くのブラウザでサポートされています。一方、少し古いブラウザではサポートされていないため注意が必要です。

もしサポートされていないブラウザで開かれた場合、長い文字列が省略されないので大変なことになってしまいます。

サンプル

バンコクの儀式的正式名称を3行で表示するサンプルです。

div {
  width: 300px;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  /* ブラウザがサポートしていない場合のフェールセーフ */
  max-height: 24px;
}

<div>
  クルンテープ・マハーナコーン・アモーンラッタナコーシン・マヒンタラーユッタヤー・マハーディロック・ポップ・ノッパラット・ラーチャタニーブリーロム・ウドムラーチャニウェートマハーサターン・アモーンピマーン・アワターンサティット・サッカタッティヤウィサヌカムプラシット
</div>

まとめ

ベンダープレフィックスが付いているプロパティが後方互換性のため仕様に登録されることを初めて知りました
意外とサポートされているブラウザが多く、安心して使用できそうです
バンコクの儀式的正式名称を知る切っ掛けとなった動画伊沢 vs 須貝（こっそり山本と通話中）(Youtube)

背景

-webkit-line-clamp vs line-clamp

サンプル

まとめ

Discussion

`-webkit-line-clamp` vs `line-clamp`