text-overflow

text-overflowCSS のプロパティで、非表示のあふれた内容をどのようにユーザーに知らせるのかを設定します。切り取られるか、省略記号 ('') を表示するか、独自の文字列を表示するかです。

text-overflow プロパティは、あふれることを強制するものではありません。テキストをコンテナーからあふれさせるには、次の例のように、他の CSS プロパティである overflowwhite-space を設定する必要があります。

overflow: hidden;
white-space: nowrap;

text-overflow プロパティは、インラインの進行方向にブロックコンテナー要素をはみ出す内容にのみ作用します (例えば、ボックスの下をあふれるテキストには作用しません)。

構文

text-overflow プロパティは、一つまたは二つの値を使用して指定することができます。一つの値が与えられた場合は、行末 (左書きの場合は右、右書きの場合は左) をあふれた動作を指定します。二つの値が指定された場合は、最初の値が行の左端、二番目の値が行の右端のあふれの動作を指定します。

それぞれの値は以下のうちの一つです。

clip
このプロパティの既定値です。このキーワード値はコンテンツ領域の末端でテキストを切り取るので、文字の途中で切り取る可能性があります。文字と文字の間で切り取るには、対象のブラウザーが text-overflow の空文字列に対応していれば、 text-overflow: ''; を指定することができます。
ellipsis
このキーワード値は、切り取られたテキストを表現するために省略記号 ('…', U+2026 Horizontal Ellipsis) を表示します。省略記号はコンテンツ領域内に表示され、表示テキストのサイズを更に狭めます。省略記号を表示する場所がなければ、切り取られます。
<string>
クリップされたテキストを表すために使われる <string> です。この文字列はコンテンツ領域内に表示され、表示テキストのサイズをさらに狭めます。この文字列自身を表示する場所がなければ、切り取られます。
fade
このキーワードはあふれたインラインコンテンツを切り取り、行ボックスの端付近にフェードアウト効果を適用して、端が完全に透明になるようにします。
fade( <length> | <percentage> )
このキーワードはあふれたインラインコンテンツを切り取り、行ボックスの端付近にフェードアウト効果を適用して、端が完全に透明になるようにします。
引数はフェード効果が適用される範囲を指定します。 <percentage> は行ボックスの幅に対する割合になります。 0 よりも小さい値は 0 に丸められます。行ボックスの幅よりも大きな値は、行ボックスの幅に丸められます。

公式定義

初期値clip
適用対象ブロックコンテナー要素
継承なし
計算値指定値
アニメーションの種類個別

形式文法

[ clip | ellipsis | <string> ]{1,2}

CSS

p {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;

  /* BOTH of the following are required for text-overflow */
  white-space: nowrap;
  overflow: hidden;
}

.overflow-visible {
  white-space: initial;
}

.overflow-clip {
  text-overflow: clip;
}

.overflow-ellipsis {
  text-overflow: ellipsis;
}

.overflow-string {
  /* Not supported in most browsers,
     see the 'Browser compatibility' section below */
  text-overflow: " [..]";
}

HTML

<p class="overflow-visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

結果

注: 以下の表の「実際の結果」は、 MDN エディターが文字列値の text-overflow プロパティを持つ style 属性の中身をすべて削除するという制限があるため、正しく表示されないことがあります。

CSS value direction: ltr direction: rtl
期待される結果 実際の結果 期待される結果 実際の結果
visible overflow 1234567890
1234567890
0987654321
1234567890
text-overflow: clip t-o_clip.png
1234567890
t-o_clip_rtl.png
1234567890
text-overflow: '' 12345
1234567890
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
,43.
1234567890

仕様書

仕様書 状態 備考
CSS Overflow Module Level 4 <string> および fade の値と fade() 関数を追加
CSS Overflow Module Level 3
text-overflow の定義
草案 初回定義

以前の版のこのインターフェイスは 勧告候補 に達していました。いくつかの "at-risk" の記載のなかった機能を取り除く必要があったため、この仕様は "草案" レベルに下されたため、勧告候補の状態ではないこのプロパティが、接頭辞なしでブラウザーに実装されました。

ブラウザーの互換性

BCD tables only load in the browser

関連情報