text-overflow
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
text-overflow は CSS のプロパティで、あふれたコンテンツが非表示になる場合、それをどのようにユーザーに示すのかを設定します。切り取られるか、省略記号 (…) を表示するか、独自の文字列を表示するかです。
試してみましょう
text-overflow: clip; text-overflow: ellipsis; text-overflow: "-"; text-overflow: ""; <section id="default-example"> <div id="example-element-container"> <p id="example-element">"Is there any tea on this spaceship?" he asked.</p> </div> </section> #example-element-container { width: 100%; max-width: 18em; } #example-element { line-height: 50px; border: 1px solid #c5c5c5; overflow: hidden; white-space: nowrap; font-family: sans-serif; padding: 0 0.5em; text-align: left; } text-overflow プロパティは、あふれることを強制するものではありません。テキストをコンテナーからあふれさせるには、次の例のように、他の CSS プロパティである overflow や white-space を設定する必要があります。
overflow: hidden; white-space: nowrap; text-overflow プロパティは、インラインの進行方向にブロックコンテナー要素をあふれるコンテンツにのみ作用します（例えば、ボックスの下にあふれるテキストには作用しません）。
構文
text-overflow: clip; text-overflow: ellipsis ellipsis; text-overflow: ellipsis " [..]"; /* グローバル値 */ text-overflow: inherit; text-overflow: initial; text-overflow: revert; text-overflow: unset; text-overflow プロパティは、1 つまたは 2 つの値を使用して指定することができます。1 つの値が与えられた場合は、行末（左書きの場合は右、右書きの場合は左）をあふれたときの動作を指定します。2 つの値が指定された場合は、最初の値が行の左端、2 番目の値が行の右端のあふれたときの動作を指定します。このプロパティは、キーワード値（clip または ellipsis）または <string> 値を受け入れます。
値
clipこのプロパティの既定値です。このキーワード値はコンテンツ領域の末端でテキストを切り取るので、文字の途中で切り取る可能性があります。文字と文字の間で切り取るには、対象のブラウザーが
text-overflowの空文字列に対応していれば、text-overflow: '';を指定することができます。ellipsisこのキーワード値は、切り取られたテキストを表現するために省略記号 (
'…',U+2026 HORIZONTAL ELLIPSIS) を表示します。省略記号はコンテンツ領域内に表示され、表示テキストのサイズを更に狭めます。省略記号を表示する場所がなければ、切り取られます。<string>クリップされたテキストを表すために使われる
<string>です。この文字列はコンテンツ領域内に表示され、表示テキストのサイズをさらに狭めます。この文字列自身を表示する場所がなければ、切り取られます。
公式定義
| 初期値 | clip |
|---|---|
| 適用対象 | ブロックコンテナー要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
text-overflow =
clip|
ellipsis
例
値 1 つの構文
この例は、様々な text-overflow の値が段落に適用された例を、左書きと右書きのテキストで示します。
HTML
<div class="ltr"> <h2>Left to right text</h2> <pre>clip</pre> <p class="overflow-clip"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <pre>ellipsis</pre> <p class="overflow-ellipsis"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <pre>" [..]"</pre> <p class="overflow-string"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> </div> <div class="rtl"> <h2>Right to left text</h2> <pre>clip</pre> <p class="overflow-clip"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <pre>ellipsis</pre> <p class="overflow-ellipsis"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <pre>" [..]"</pre> <p class="overflow-string"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> </div> 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-clip { text-overflow: clip; } .overflow-ellipsis { text-overflow: ellipsis; } .overflow-string { text-overflow: " [..]"; } body { display: flex; justify-content: space-around; } .ltr > p { direction: ltr; } .rtl > p { direction: rtl; } 結果
値 2 つの構文
この例は text-overflow の値 2 つの構文を表し、テキストの先頭と末尾の様々なあふれの動作を表しています。 効果を見るには、スクロールをして行頭を隠すようにする必要があります。
HTML
<pre>clip clip</pre> <p class="overflow-clip-clip"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <pre>clip ellipsis</pre> <p class="overflow-clip-ellipsis"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <pre>ellipsis ellipsis</pre> <p class="overflow-ellipsis-ellipsis"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <pre>ellipsis " [..]"</pre> <p class="overflow-ellipsis-string"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> CSS
p { width: 200px; border: 1px solid; padding: 2px 5px; /* 以下のどちらも text-overflow に必要です */ white-space: nowrap; overflow: scroll; } .overflow-clip-clip { text-overflow: clip clip; } .overflow-clip-ellipsis { text-overflow: clip ellipsis; } .overflow-ellipsis-ellipsis { text-overflow: ellipsis ellipsis; } .overflow-ellipsis-string { text-overflow: ellipsis " [..]"; } JavaScript
// それぞれの段落をスクロールされ、行頭が隠れるようにします const paras = document.querySelectorAll("p"); for (const para of paras) { para.scroll(100, 0); } 結果
仕様書
| Specification |
|---|
| CSS Overflow Module Level 3 # text-overflow |
| Scalable Vector Graphics (SVG) 2 # TextOverflowProperty |
以前の版のこのインターフェイスは 勧告候補 に達していました。いくつかの "at-risk" の記載のなかった機能を取り除く必要があったため、この仕様は 草案 レベルに下されたため、勧告候補の状態ではないこのプロパティが、接頭辞なしでブラウザーに実装されました。
ブラウザーの互換性
関連情報
- 関連 CSS プロパティ:
overflow,white-space - 単語の改行を制御する CSS プロパティ:
overflow-wrap,word-break
