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.
text-overflow
は CSS のプロパティで、溢れた内容が非表示になる場合、それをどのようにユーザーに示すのかを設定します。切り取られるか、省略記号 (…
) を表示するか、独自の文字列を表示するかです。
試してみましょう
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 |
以前の版のこのインターフェイスは 勧告候補 に達していました。いくつかの "at-risk" の記載のなかった機能を取り除く必要があったため、この仕様は 草案 レベルに下されたため、勧告候補の状態ではないこのプロパティが、接頭辞なしでブラウザーに実装されました。
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 関連 CSS プロパティ:
overflow
,white-space
- 単語の改行を制御する CSS プロパティ:
overflow-wrap
,word-break