text-overflow
text-overflow
は CSS のプロパティで、非表示のあふれた内容をどのようにユーザーに知らせるのかを設定します。切り取られるか、省略記号 ('…
') を表示するか、独自の文字列を表示するかです。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
text-overflow
プロパティは、あふれることを強制するものではありません。テキストをコンテナーからあふれさせるには、次の例のように、他の CSS プロパティである overflow
や white-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
に丸められます。行ボックスの幅よりも大きな値は、行ボックスの幅に丸められます。
公式定義
形式文法
例
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 |
![]() |
![]() |
||
text-overflow: '' |
12345 |
1234567890
|
54321 |
1234567890
|
text-overflow: ellipsis |
1234… | …4321 | ||
text-overflow: '.' |
1234. |
1234567890
|
.4321 |
1234567890
|
text-overflow: clip clip |
123456 | 654321 | ||
text-overflow: clip ellipsis |
1234… | 6543… | ||
text-overflow: clip '.' |
1234. |
1234567890
|
6543. |
1234567890
|
text-overflow: ellipsis clip |
…3456 | …4321 | ||
text-overflow: ellipsis ellipsis |
…34… | …43… | ||
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
関連情報
- 関連 CSS プロパティ:
overflow
,white-space
- 単語の改行を制御する CSS プロパティ:
overflow-wrap
,word-break