text-overflow: ellipsis

概要

text-overflow: ellipsis はコンテナからはみ出したテキストの末尾を「…」で置換する。overflow: hidden と white-space: nowrap（または明示的なサイズ制約）と組み合わせて使用する必要がある。

対応ブラウザ

基本構文

/* 1行の省略 */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 複数行の省略（-webkit-line-clamp） */
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

実務での使いどころ

• カードコンポーネント

  カード内のタイトルや説明文が長い場合に省略表示し、レイアウトの崩れを防ぐ。

• テーブルセル

  データテーブルのセル内容が長い場合に省略し、列幅を一定に保つ。

注意点

アクセシビリティ

• 省略されたテキストでも、スクリーンリーダーは全文を読み上げる。視覚的に隠れた情報へのアクセス手段を確保すること。

参考リンク

• MDN: text-overflow
• Can I use: text-overflow