text-overflow

概要

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

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

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

この 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		123456		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

仕様

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

• Previously (OBSOLETE) CSS 3 Text Candidate Recommendation 2003-05-14

ブラウザ実装状況

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 が必要です。

関連情報