概要

text-overflow CSS プロパティは、テキストが表示領域をオーバーフローしていることを、ユーザに知らせる方法を決めます。クリップするか、省略記号 ('…'、U+2026…) を表示するか、ウェブ著作者の定義した文字を表示させることができます。

text-overflow.png

クリップはボックスのボーダーで発生します; 文字を境目にしてクリップするには、空文字を使えます('')。

このプロパティは、ブロックコンテナ要素からインラインの進行方向にオーバーフローしたコンテンツだけに作用します(例えば、ボックス下部のオーバーフローには作用しません)。テキストは、折り返しが禁止されている場合(例: ‘white-space:nowrap’ のとき)や、1つの単語が長すぎて入らないとき、オーバーフローすることができます。

この CSS プロパティはオーバーフローを強制するものではありません; オーバーフローを強制し、text-overflow を適用するためには、著作者は要素に追加のプロパティを使う必要があります(例えば overflowhidden にするなど)。

初期値clip
適用対象ブロックコンテナ要素
継承不可
メディアvisual
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

形式文法: [ 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 、 &hellip;) を表示します。省略記号はコンテンツ領域内に表示され、表示テキストのサイズを更に狭めます。省略記号を表示する場所がなければ、クリップされます。
<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 t-o_clip.png
123456
t-o_clip_rtl.png
1234567890
text-overflow: '' 12345
123456
54321
1234567890
text-overflow: ellipsis 1234…
1234567890
…4321
1234567890
text-overflow: '.' 1234.
1234567890
.4321
1234567890
text-overflow: clip clip 123456
1234567890
654321
1234567890
text-overflow: clip ellipsis 1234…
1234567890
6543…
1234567890
text-overflow: clip '.' 1234.
1234567890
6543.
1234567890
text-overflow: ellipsis clip …3456
1234567890
…4321
1234567890
text-overflow: ellipsis ellipsis …34…
1234567890
…43…
1234567890
text-overflow: ellipsis '.' …34.
1234567890
…43.
1234567890
text-overflow: ',' clip ,3456
1234567890
,4321
1234567890
text-overflow: ',' ellipsis ,34…
1234567890
,43…
1234567890
text-overflow: ',' '.' ,34.
1234567890
,53.
1234567890

仕様

仕様書 策定状況 コメント
CSS Basic User Interface Module Level 3
text-overflow の定義
勧告案  

このインタフェースの以前のバージョンは勧告候補 に達していました。いくつかの "at-risk" の記載のなかった機能を取り除く必要があって、仕様は "草案" レベルに降ろされました。こうした経緯により、勧告候補にないこのプロパティが、プレフィックスなしでブラウザに実装されました。

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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

関連情報

ドキュメントのタグと貢献者

タグ: 
 最終更新者: SphinxKnight,