| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {text-overflow: 値 } |
| 値 の形式 | clip， ellipsis | 文字列 |
| 初 期 値 | clip |
| 対応ブラウザー | C?+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+ |
| 適用可能な要素 | ブロックコンテナ |
| 継 承 | しない |
text-overflow プロパティ は，はみ出たテキストの表示方法 を指定します。
たとえば，"white-space: nowrap" などで文字列の折り返しが禁止されている場合には，ブロックコンテナに文字列が入りきらなくなり，かつ，はみ出た文字が表示されるように設定されていないとクリップが発生します。 つまり，文字列の切捨てが行われて途中から表示されなくなります。 text-overflow プロパティ は，その際の表示方法を指定するものです。
指定できる値の形式は，以下のとおりです。
| 値 | 説 明 |
|---|---|
| clip | ブロックコンテナからはみ出たテキストはクリップします。 （切り取って表示しません） |
| ellipsis | ブロックコンテナからはみ出たテキストがあることを示すため，ellipsis文字（省略記号: U+2026）を表示します。 |
| 文字列 | ブロックコンテナからはみ出たテキストがあることを示すため，指定した文字列を表示します。 空文字列 "" を指定すると文字の境界でクリップします。 |
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css">
<!--
div.sample {
width:300px;
overflow: hidden;
white-space: nowrap;
padding: 5px;
margin: 10px;
border: 2px solid #666;
}
.tovf1 { text-overflow: clip; }
.tovf2 { text-overflow: ellipsis; }
.tovf3 { text-overflow: '.'; }
.tovf4 { text-overflow: ''; }
-->
</style> |
| HTML <body> ～ </body> |
<div class="sample tovf1">ああああああああああああああああああああああああああ</div> <div class="sample tovf2">ああああああああああああああああああああああああああ</div> <div class="sample tovf3">ああああああああああああああああああああああああああ</div> <div class="sample tovf4">ああああああああああああああああああああああああああ</div> |
| ブラウザー 表示例 （未対応のブラウザーでは正しく表示されません） |
|---|
ああああああああああああああああああああああああああ
ああああああああああああああああああああああああああ
ああああああああああああああああああああああああああ
ああああああああああああああああああああああああああ |
はみ出た文字を改行せずにクリップして表示するには，white-space: nowrap; overflow: hidden; をともに指定する必要があります。
値を文字列で指定する方法については，FireFox が対応していることが確認できました。