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-overflowCSS のプロパティで、あふれたコンテンツが非表示になる場合、それをどのようにユーザーに示すのかを設定します。切り取られるか、省略記号 () を表示するか、独自の文字列を表示するかです。

試してみましょう

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

css
overflow: hidden;
white-space: nowrap;

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

構文

css
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

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

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

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

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

js
// それぞれの段落をスクロールされ、行頭が隠れるようにします
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" の記載のなかった機能を取り除く必要があったため、この仕様は 草案 レベルに下されたため、勧告候補の状態ではないこのプロパティが、接頭辞なしでブラウザーに実装されました。

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-overflow
clip
ellipsis
<string>
Two-value syntax

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報