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

Custom ellipses

テキストがオーバーフローした際に表示される省略記号をカスタムの文字列に変更できます。デフォルトの「…」の代わりに任意の文字列を指定可能です。ただし、Firefoxのみの対応であるため、実用面では注意が必要です。

テキスト省略カスタム表示

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.text-overflow.string
9
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.truncated {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: " [Read more]";
}

ライブデモ

customabbreviatesymbol

CSS customabbreviatesymbol demo.

プレビュー全画面表示

standard Ellipsis

CSS standard ellipsis demo.

プレビュー全画面表示

arrowabbreviate

CSS arrowabbreviate demo.

プレビュー全画面表示

実務での使いどころ

  • 多言語対応の省略表示

    言語に合わせた省略記号（例：中国語の「……」や日本語の「～」）を表示して、ローカライズされたUI体験を提供します。

注意点

  • Firefox以外のブラウザではサポートされていないため、text-overflow: ellipsisをフォールバックとして必ず設定してください。

アクセシビリティ

  • 省略されたテキストの完全な内容をaria-labelやtitle属性で提供し、スクリーンリーダーのユーザーが全文を取得できるようにしてください。

参考リンク