text-overflow CSS3CSS4

text-overflow は、インライン内容がブロックコンテナ要素（ブロック）のインライン進行方向のラインボックスのエッジをはみ出した場合のレンダリングを指定します。つまり、内容が領域を超えてはみ出した場合にどのように表示するかを指定します。また、overflow の値は visible 以外でなければ上手く表示しません。

※ 例えば、white-space: nowrap; または、長すぎる単語などでテキストが折り返されない時にはみ出す可能性があります。

名前	:	text-overflow
値	:	[ clip \| ellipsis \| <string> \| fade \| <fade()> ]{1,2}
初期値	:	clip
適用対象	:	ブロックコンテナ
継承	:	しない
パーセンテージ	:	ラインボックスの幅を参照
メディア	:	visual（視覚的）
計算値	:	指定通り、<length>を絶対単位に変換
正規順序	:	per grammar（文法ごと）
アニメーション	:	discrete（離散的）

Value（値）

clip: 初期値インラインコンテンツ（内容）がはみ出した場合は表示しない
ellipsis: はみ出したインラインコンテンツ（内容）を ellipsis（エリプシス）「…」で表示する
<string>: 指定された文字列をレンダリングしてクリップ（切り取る）した内容を表す
fade: fade() と同じだが、フェーディング効果（徐々に消える）が適用される距離は UA によって決定される。 1em は妥当な値として示唆される。
fade( <length> | <percentage> ): ラインボックスをはみ出すインラインコンテンツ（内容）をクリップする。文字は部分的にしかレンダリングされないことがある。引数はフェード効果が適用される距離を決定します。<percentage> はラインボックスの幅に対して決定します。 0 より小さい値は 0 にクリップされ、ラインボックスの幅より大きい値はラインボックスの幅にクリップされます。

値が、1 つの場合は、end ラインボックスのエッジ（辺）にのみ適用されます。 2 つの場合は、最初の値は line-left エッジに適用され、2 番目の値は line-right エッジに適用されます。 end、 line-left、 line-right の用語は、 [CSS-WRITING-MODES-3] で定義されています。

※ 2 つの値がある場合には start 及び end ではなく line-left 及び line-right を使用することが意図的であり、矢印のような方向性のある文字を使いやすくします。

ellipsis と string の値については、 ellipsis/string に合うようにライン（行）の該当するエッジで文字や atomic インラインレベル要素を非表示にして、ellipsis/string を残りのインラインコンテンツの該当するエッジのすぐ隣に配置する必要があります。ラインの最初の文字または atomic インラインレベル要素は、省略ではなくクリップされなければなりません。（下の例を参照）

※ それ以上分割できないインラインレベルのボックス＝置換インラインレベル要素（画像やオブジェクトなど）、display の計算値が inline-block、inline-table である要素によって生成されるボックスのことを、 atomic インラインレベルボックスと言います。

次の例は、双方向の状態で文字列がエリプシスの為の場所を作るために隠される文字を示しています。


＜ CSS サンプル ＞

div {
  font-family: monospace;
  white-space: pre;
  overflow: hidden;
  width: 9ch;
  text-overflow: ellipsis;
}

HTML サンプル	レンダリング参考	貴方のブラウザでの表示
<div>שלום 123456</div>	123456 ם…	שלום 123456
<div dir=rtl>שלום 123456</div>	…456 שלום	שלום 123456

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p.test1 { text-overflow: clip; white-space: nowrap; overflow: hidden; }
   p.test2 { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
   p.test3 { text-overflow: "."; white-space: nowrap; overflow: hidden; }
   p.test4 { text-overflow: fade; white-space: nowrap; overflow: hidden; }
   p.test5 { text-overflow: fade(10px); white-space: nowrap; overflow: hidden; }
   p.test6 { text-overflow: fade(10%); white-space: nowrap; overflow: hidden; }
   p.test7 { text-overflow: clip ellipsis; white-space: nowrap; overflow: hidden; }
   p.test8 { text-overflow: "." "."; white-space: nowrap; overflow: hidden; }
   p.test9 { text-overflow: fade clip; white-space: nowrap; overflow: hidden; }
   p.test10 { text-overflow: fade(10px) fade(10px); white-space: nowrap; overflow: hidden; }
   p.test11 { text-overflow: fade(10%) fade(10%); white-space: nowrap; overflow: hidden; }
  </style>
 </head>
 <body>
   <p class="test1">1234567890</p>
   <p class="test2">1234567890</p>
   <p class="test3">1234567890</p>
   <p class="test4">1234567890</p>
   <p class="test5">1234567890</p>
   <p class="test6">1234567890</p>
   <p class="test7">1234567890</p>
   <p class="test8">1234567890</p>
   <p class="test9">1234567890</p>
   <p class="test10">1234567890</p>
   <p class="test11">1234567890</p>
 </body>
</html>

display

1234567890	text-overflow: clip;
1234567890	text-overflow: ellipsis;
1234567890	text-overflow: ".";
1234567890	text-overflow: fade;
1234567890	text-overflow: fade(10px);
1234567890	text-overflow: fade(10%);
1234567890	text-overflow: clip ellipsis;
1234567890	text-overflow: "." ".";
1234567890	text-overflow: fade clip;
1234567890	text-overflow: fade(10px) fade(10px);
1234567890	text-overflow: fade(10%) fade(10%);

指定をいろいろと変えてみる。（※１）

test

あいうえおかきくけこさしすせそ。	text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
あいうえおかきくけこさしすせそ。	text-overflow: ellipsis; white-space: nowrap; overflow: auto;
あいうえおかきくけこさしすせそ。	text-overflow: ellipsis; white-space: nowrap; overflow: scroll;
あいうえおかきくけこさしすせそ。	text-overflow: ellipsis; white-space: nowrap;
あいうえおかきくけこさしすせそ。	text-overflow: ellipsis; overflow: hidden;
あいうえおかきくけこさしすせそ。	text-overflow: ellipsis;