line-clamp

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

line-clamp は CSS のプロパティで、ブロックのコンテンツを指定した行数に制限することができます。

メモ: 過去のブラウザーとの互換性のため、ベンダー接頭辞の付いた -webkit-line-clamp プロパティは、 display プロパティに -webkit-box もしくは -webkit-inline-box が設定されており、かつ -webkit-box-orient プロパティに vertical が設定されている組み合わせのときのみ使用できます。これらは非推奨のプロパティですが、これら 3 つのプロパティの共依存性は完全に仕様化された動作であり、今後も対応していきます。

ほとんどの場合、 overflow に hidden を設定できます。そうしなければ内容は切り取られませんが、省略記号は指定した行数の後に表示されます。

アンカー要素に適用すると、切り捨てがテキストの途中で行われる場合があるかもしれませんが、必ずしも末尾で切り捨てが行われるとは限りません。

構文

css
/* キーワード値 */
line-clamp: none;

/* <integer> 値 */
line-clamp: 3;
line-clamp: 10;

/* グローバル値 */
line-clamp: inherit;
line-clamp: initial;
line-clamp: revert;
line-clamp: revert-layer;
line-clamp: unset;

値

none

この値は、コンテンツの行数が制限されないことを指定します。

<integer>

この値は、コンテンツの制限される行数を指定します。 0 より大きな値でなければなりません。

公式定義

初期値none
適用対象段組みコンテナーを除くブロックコンテナー
継承なし
計算値指定通り
アニメーションの種類integer

形式文法

line-clamp = 
  none                                   |
  <integer [1,∞]> || <'block-ellipsis'>  

<block-ellipsis> = 
  none      |
  auto      |
  <string>

例

段落の切り捨て

HTML

html
<p>
  この例では、 <code>-webkit-line-clamp</code> プロパティを 3 に設定すると、テキストは 3 行目の後で切られます。テキストが切られた点には省略記号が表示されます。
</p>

CSS

css
p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

結果

仕様書

Specification
CSS Overflow Module Level 4
# propdef-line-clamp

ブラウザーの互換性

関連情報