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

line-clamp

テキストを指定した行数で切り詰めて省略記号（...）を表示する機能です。カード型UIやリスト表示で、説明文を一定行数に収めてレイアウトの統一性を保つ場合に使用されます。現在広く使われている-webkit-line-clampはプレフィックス付きの実装であり、標準仕様のline-clampは策定中です。

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

概要

テキストを指定した行数で切り詰めて省略記号（...）を表示する機能です。カード型UIやリスト表示で、説明文を一定行数に収めてレイアウトの統一性を保つ場合に使用されます。現在広く使われている-webkit-line-clampはプレフィックス付きの実装であり、標準仕様のline-clampは策定中です。

対応ブラウザ

デスクトップ

Chrome 未対応
Edge 未対応
Safari 未対応
Firefox 未対応

基本構文

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

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク