Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

line-clamp

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

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

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

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

テキスト切り詰め行数制限

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
line-clamp
6
17
68
18.2
18
18.2
none
68
18.2
18.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 3件
削除済み
  • このバージョンで機能が削除されました (18.4)
実装メモ
  • 偶発的な暴露。
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (5)
注釈 3件
削除済み
  • このバージョンで機能が削除されました (18.4)
実装メモ
  • 偶発的な暴露。
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (4.2)

基本構文

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

ライブデモ

2 row truncate

CSS 2 row truncate demo.

プレビュー全画面表示

3 row truncate

CSS 3 row truncate demo.

プレビュー全画面表示

1 row truncate

CSS 1 row truncate demo.

プレビュー全画面表示

実務での使いどころ

  • カードUIのテキスト行数制限

    カードコンポーネントの説明文を3行に制限し、省略記号で切り詰めることでレイアウトの統一性を維持します。

注意点

  • 標準仕様のline-clampは未サポートですが、-webkit-line-clampは主要ブラウザで広く対応しています。display: -webkit-boxと-webkit-box-orientの併用が必要です。

アクセシビリティ

  • 切り詰められたテキストの全文をtitle属性やaria-labelで提供し、スクリーンリーダーユーザーが全コンテンツにアクセスできるようにしてください。

参考リンク