最近便利なCSSおれおれAdvent Calendar 2023 – 14 日目

text-overflow ってあるじゃないですか、文章が長いときに省略するやつ。でもあれ 1 行（横がはみ出したとき）しか使えないんですよね。line-clamp なら複数行の文章でも省略できます。

ただし問題もあります。

例

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

名前

使うのは line-clamp じゃなくて -webkit-line-clamp です。仕様書にもそう載っていて現在 Webkit 以外でも使えます。

line-clamp も仕様には載ってはいて、これを実装する場合は後方互換のためこの -webkit-line-clamp も対応する必要があります。といっても皆まだ接頭辞付きのしか対応してないんだけど。

利用上の注意

あんまり無敵じゃないです。

  • 行数でしか指定できない（長さ、高さではない）
  • height があって大きいと、省略記号 “…” を表示した後も文章が続く
  • height があって小さいと、省略記号 “…” が表示されずに途切れる
  • padding でも大きな height と同様に文章が続く
  • margin なんかの空白を含む時はそれを無視して文章の行数のみ数える

おしまい

ちょっと難しいというか面倒だけど、でもまああるだけありがたいって感じでしょうか。

参考