Widely available 安全に使用可能。UI コンポーネントで広く使われている基本テクニック。

text-overflow: ellipsis

text-overflow は CSS のプロパティで、あふれたコンテンツが非表示になる場合、それをどのようにユーザーに示すのかを設定します。切り取られるか、省略記号 (…) を表示するか、独自の文字列を表示するかです。

テキストUI

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
text-overflow
1
12
7
1.3
18
1
clip
1
12
7
1.3
18
1
ellipsis
1
12
7
1.3
18
1
two value syntax

2 つの値の構文
9
その他
svg.global_attributes.text-overflow

SVG の text-overflow 属性は、テキストがライン ボックスからオーバーフローした場合にテキスト コンテンツ ブロック要素をレンダリングする方法を指定します。 これは、たとえば、空白属性または CSS 空白プロパティの値が nowrap である場合に発生する可能性があります。 このプロパティは、事前にフォーマットされたテキストやパス上にあるテキストには適用されません。
1
12
7
1.3
18
1
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • Firefox 10 までは、水平両側にインライン オーバーフローがあるブロックの `text-overflow` の処理が正しくありませんでした。 Firefox 10 より前では、値が 1 つだけ指定された場合 (「text-overflow: ellipsis;」など)、ブロックのテキストの方向に基づいて、テキストは終端のみではなく、ブロックの両側で省略されていました。
注釈 1件
実装メモ
  • Firefox 10 までは、水平両側にインライン オーバーフローがあるブロックの `text-overflow` の処理が正しくありませんでした。 Firefox 10 より前では、値が 1 つだけ指定された場合 (「text-overflow: ellipsis;」など)、ブロックのテキストの方向に基づいて、テキストは終端のみではなく、ブロックの両側で省略されていました。

基本構文

CSS 
/* Truncate to one line */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Truncation of multiple lines (-webkit-line-clamp) */
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

ライブデモ

1 row. abbreviate

text-overflow: ellipsis 1 row. abbreviate demo.

プレビュー全画面表示

2 rowkranp

text-overflow: ellipsis 2 rowkranp demo.

プレビュー全画面表示

3 rowkranp

text-overflow: ellipsis 3 rowkranp demo.

プレビュー全画面表示

実務での使いどころ

  • カードコンポーネント

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

  • テーブルセル

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

注意点

  • 省略されたテキストの全文をユーザーが確認できるよう、ツールチップや展開機能を提供すること。
  • overflow: hidden と white-space: nowrap を併用しないと動作しない。

アクセシビリティ

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

参考リンク