概要
text-overflow
CSS プロパティは、テキストが表示領域をオーバーフローしていることを、ユーザに知らせる方法を決めます。クリップするか、省略記号 ('…'、U+2026
、…
) を表示するか、ウェブ著作者の定義した文字を表示させることができます。
クリップはボックスのボーダーで発生します; 文字を境目にしてクリップするには、空文字を使えます(''
)。
このプロパティは、ブロックコンテナ要素からインラインの進行方向にオーバーフローしたコンテンツだけに作用します(例えば、ボックス下部のオーバーフローには作用しません)。テキストは、折り返しが禁止されている場合(例: ‘
’ のとき)や、1つの単語が長すぎて入らないとき、オーバーフローすることができます。white-space:nowrap
この CSS プロパティはオーバーフローを強制するものではありません; オーバーフローを強制し、text-overflow
を適用するためには、著作者は要素に追加のプロパティを使う必要があります(例えば overflow
を hidden
にするなど)。
構文
形式文法: [ clip | ellipsis | <string> ]{1,2}
/* 1 値構文: 行末の(ltr なら右端、rtl なら左端)オーバーフロー処理を指定します */ text-overflow: clip text-overflow: ellipsis text-overflow: "…" /* 2 値構文: 1 つ目の値は行の左端での、2つ目の値は右端でのオーバーフロー処理を指定します。 文章の方向は関係しません */ text-overflow: clip ellipsis text-overflow: "…" "…" text-overflow: inherit
値
clip
- デフォルトの値です。コンテンツ領域でテキストを切り取ります。したがって文字の真ん中で切り取るかもしれません。文字と文字の間で切り取るには、空の文字列値(
''
) を使わねばなりません。 ellipsis
- 切り取られたテキストの代わりに、省略記号 (ellipses) … (U+2026 、
…
) を表示します。省略記号はコンテンツ領域内に表示され、表示テキストのサイズを更に狭めます。省略記号を表示する場所がなければ、クリップされます。 <string>
- クリップされたテキストを表すために使われる
<string>
です。この文字列はコンテンツ領域内に表示され、表示テキストのサイズをさらに狭めます。この文字列自身を表示する場所がなければ、クリップされます。
例
p { white-space: nowrap; width: 100%; /* IE6 では width の指定が必要 */ overflow: hidden; /* "overflow" の値は "visible" 以外のものを指定する */ -o-text-overflow: ellipsis; /* Opera 9-10 */ text-overflow: ellipsis; /* IE, WebKit (Safari, Chrome), Firefox 7, Opera 11 */ }
CSS 値 | direction: ltr |
direction: rtl |
||
---|---|---|---|---|
期待される結果 | 実際の結果 | 期待される結果 | 実際の結果 | |
visible overflow | 1234567890 |
1234567890
|
0987654321 |
1234567890
|
text-overflow: clip |
||||
text-overflow: '' |
12345 | 54321 | ||
text-overflow: ellipsis |
1234… | …4321 | ||
text-overflow: '.' |
1234. | .4321 | ||
text-overflow: clip clip |
123456 | 654321 | ||
text-overflow: clip ellipsis |
1234… | 6543… | ||
text-overflow: clip '.' |
1234. | 6543. | ||
text-overflow: ellipsis clip |
…3456 | …4321 | ||
text-overflow: ellipsis ellipsis |
…34… | …43… | ||
text-overflow: ellipsis '.' |
…34. | …43. | ||
text-overflow: ',' clip |
,3456 | ,4321 | ||
text-overflow: ',' ellipsis |
,34… | ,43… | ||
text-overflow: ',' '.' |
,34. | ,53. |
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
CSS Basic User Interface Module Level 3 The definition of 'text-overflow' in that specification. |
勧告候補 |
このインタフェースの以前のバージョンは勧告候補 に達していました。いくつかの "at-risk" の記載のなかった機能を取り除く必要があって、仕様は "草案" レベルに降ろされました。こうした経緯により、勧告候補にないこのプロパティが、プレフィックスなしでブラウザに実装されました。
- Previously (OBSOLETE) CSS 3 Text Candidate Recommendation 2003-05-14
ブラウザ実装状況
機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
基本サポート | 1.0 (312.3) | 7.0 (7.0) (See notes) | 6.0 (See notes) | 9-o (See notes) 11.0 |
1.3 (312.3) |
2 値構文 | 未サポート | 9.0 (9.0) | 未サポート | 未サポート | 未サポート |
文字列値 | 未サポート | 9.0 (9.0) | 未サポート | 未サポート | 未サポート |
機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
基本サポート | (有) | 7.0 (7.0) | ? | (有) | (有) |
2 値構文 | 未サポート | 9.0 (9.0) | 未サポート | 未サポート | 未サポート |
文字列値 | 未サポート | 9.0 (9.0) | 未サポート | 未サポート | 未サポート |
Gecko に関する注記
Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7) より、左右両側でインラインのオーバーフローが起きているブロックでの text-overflow
の処理が修正されました。以前は 1 つの値だけを指定すると(例:text-overflow:ellipsis;
)、文章の方向に基づいた終端だけでなく、両端に省略記号が生じていました。
Internet Explorer に関する注記
IE8 では text-overflow
の同義値として -ms-text-overflow
が導入されました。 -ms-
プレフィックスは使用しないでください。
【訳注: -ms-text-overflow
は IE8 モードでのみ機能します。IE7 モード、EmulateIE7 モード、IE5 モードでは機能しません (参照 : Internet Explorer 8 における CSS の改良点)】
Opera に関する注記
Opera 9 と 10 ではプレフィックス版、-o-text-overflow
が必要です。
ブラウザ | バージョン | サポートする値 | |
---|---|---|---|
Internet Explorer | 6.0 | text-overflow |
ellipsis | clip |
Firefox (Gecko) | 7.0 (7.0) | text-overflow |
ellipsis | clip |
Opera (Presto) | 9.0 (2.0) | -o-text-overflow |
ellipsis | clip |
11.0 (2.7) | text-overflow |
ellipsis | clip |
|
Safari | Chrome | WebKit | 1.3 | 1.0 | 312.3 | text-overflow |
ellipsis | clip |