CSS : 「line-clamp」 で表示行数を制御する

こちらで紹介されていたline-clampプロパティを試してみた。

表示サンプル

See the Pen line-clamp test by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

上記サンプルでは4行まで表示するようにしています。

HTML

<p class="line-clamp">文字列</p>

極めて単純で、行数を制限したいタグに line-clamp というクラスを指定しています。

CSS

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

line-clamp 関連のプロパティはいずれも正式採用されておらず、ベンダープレフィックスが必要な状態です。
以下プロパティ別に説明します。

display: -webkit-box;
(display: box)

Flexboxの状態にするプロパティ。
display:block と字面も印象も似ていて混乱しそうですが、挙動は別物です。

-webkit-line-clamp: 4;
(line-clamp: 4)

今回の要。表示する行数を指定できるプロパティ。
将来的にはこのプロパティだけで今回の表現の実装が予定されている…らしい。

-webkit-box-orient: vertical;
(box-orient: vertical)

Flexbox の要素方向を設定するプロパティ。
line-clamp には現在これが必要。