CSSのtext-overflowプロパティは、テキストが要素のボックスをオーバーフローしたときにテキストがクリップされる状況を処理します。クリップする（つまり、切り取る、非表示にする）、省略記号を表示する（ …、Unicode範囲値U + 2026）、または作成者定義の文字列を表示する（現在、作成者定義の文字列はブラウザでサポートされていません）。
text-overflowは、コンテナのoverflowプロパティに値がある場合にのみ発生することに注意してくださいhidden、scrollまたはautoおよびwhite-space: nowrap;。
テキストのオーバーフローは、ブロックレベルまたはインラインブロックレベルの要素でのみ発生する可能性があります。これは、要素がオーバーフローするために幅が必要なためです。オーバーフローは、directionプロパティまたは関連する属性によって決定される方向で発生します。
次のデモは、すべての可能な値を含むtext-overflowプロパティの動作を示しています。ブラウザのサポートはさまざまです！
からscrollまたはautoはスクロールバーを表示して追加のテキストを表示し、hiddenはしません。非表示のテキストは、省略記号を選択することで選択できます。
古いもの
古いバージョンの仕様では、省略記号の画像へのURLを使用できると記載されていますが、次のようになります。それが削除された場合。
2つの値の構文があります。 text-overflow: ellipsis ellipsis;、これは同じコンテナの左側と右側のオーバーフローを制御します。それをどのように達成できるかわかりません。おそらく、小さすぎるコンテナの中央にテキストがありますか？新しい仕様では、これは文字列の定義と同様に「危険にさらされている」とされています。
ellipsis-wordがどこから来たのかわかりません。仕様またはWebPlatform.org以外のその他のドキュメント。
text-overflowプロパティは、とtext-overflow-ellipsisですが、もう存在せず、これらの個別のプロパティは存在しません。
関連プロパティ
-
white-space -
overflow -
word-break -
width