プロパティ text-overflow

プロパティ text-overflow は、テキストがブロックに収まらず切り取られたことを示すため、切り取られたテキストの末尾に省略記号（…）を追加します。

このプロパティを機能させるためには、テキストが overflow プロパティまたは overflow-x プロパティの値 hidden、auto、または scroll によって切り取られている必要があります。値が visible（これがデフォルト値です）の場合、text-overflow は機能しません。

構文

cssセレクタ {
  text-overflow: ellipsis | clip;
}

値

デフォルト値: clip。

例 . はみ出るテキスト

この例では、非常に長い単語がコンテナに収まりきらず、境界を越えてはみ出します。切り取りは発生しません：

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: visible;
  border: 1px solid red;
}

Результат:

例 . overflow プロパティを追加

現在、コンテナの境界を超えてはみ出した部分は単純に切り取られます：

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  border: 1px solid red;
}

Результат:

例 . ellipsis 値

ここでは、overflow プロパティに加えて、値 ellipsis の text-overflow も追加します。切り取られたテキストの末尾に省略記号が追加されます：

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

例 . スクロールバー付き

overflow: auto と text-overflow: ellipsis を設定すると、スクロールバーが表示されますが、それでも省略記号は追加されます。例のスクロールバーをスクロールしてみてください：

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: auto;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

例 . 非常に長い単語がない場合

コンテナの境界を越えてはみ出るほど長い単語がない場合、切り取りは発生しません（はみ出すものがないため）。次の例を見てみましょう：

html<div id="elem">
  Lorem ipsum dolor sit amet adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

例 . 1行のテキスト

ただし、テキストが長すぎる場合（個々の単語ではなく、全体として）に改行されずに切り取られるようにしたい状況があります。これは、値 nowrap の white-space プロパティを追加し、テキストの次行への折り返しを禁止することで実現します。以下の例を見てください。これでテキストが切り取られます：

html<div id="elem">
  Lorem ipsum dolor sit amet adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

例 . パーセント幅

ブロックの幅を % で設定した場合も、切り取りは正しく機能します：

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

関連項目