PLAY CSS
jaen

テキスト

-webkit-line-clamp

-webkit-line-clamp は、文章を決めた行数で打ち切り、最後の行の終わりに「…」を付けます。カードの説明文などを 2〜3 行にそろえるときに使います。

構文

none | <integer [1,∞]>

プレビュー

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
プリセット
右下の角をドラッグするとサイズを変えられます

コード

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

コントロール

-webkit-line-clamp2
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

解説

古い仕組みの名残で、display: -webkit-box と -webkit-box-orient: vertical を一緒に書いたときだけ効きます。 残りの行を隠すために overflow: hidden も要ります。このページのコードにも、この 3 つを一緒に書いています。

値の書き方

  • none：打ち切りません。初期値です。
  • 2 などの 1 以上の整数：その行数まで表示し、最後の行の終わりに「…」を付けます。

-webkit- が付いていますが、主なブラウザはすべて対応しています。接頭辞の無い line-clamp も仕様にありますが、まだ対応しているブラウザがほとんどありません。

高さを決めないこと

箱の高さを height で決めていると、打ち切ったあとの行も箱の中に見えてしまいます。高さは決めずに、中身に合わせて使います。 また、overflow: hidden は padding の内側までしか隠さないので、下に padding があると次の行の上のほうがそこにのぞきます。このページのプレビューでは、下の余白を透明な border でとっています。

1 行だけのとき

1 行で打ち切るだけなら、white-space: nowrap と text-overflow: ellipsis の組み合わせでもできます。

参考リンク

MDN Web Docs-webkit-line-clampSpecificationCSS Overflow Module Level 4Can I use-webkit-line-clamp
PLAY CSS