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

Custom ellipses

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

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

概要

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

対応ブラウザ

デスクトップ

Chrome 未対応
Edge 未対応
Safari 未対応
Firefox 9+

モバイル

Chrome Android 未対応
Safari iOS 未対応
Firefox Android 9+

基本構文

CSS 
.truncated {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: " [続きを読む]";
}

実務での使いどころ

  • 多言語対応の省略表示

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

注意点

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

アクセシビリティ

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

参考リンク