Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

概要

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

text-overflow.png

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

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

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

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

構文

形式文法: [ 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
The definition of 'text-overflow' in that specification.
勧告候補  

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

ブラウザ実装状況

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

関連情報

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

タグ: 
 このページの貢献者: Guillaume-Heras, Sebastianz, ethertank, sosleepy, hATrayflood
 最終更新者: Guillaume-Heras,