プロパティ text-overflow

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

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

構文

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

値

値	説明
`ellipsis`	切り取られたテキストの末尾に省略記号を追加します。
`clip`	末尾に省略記号を追加しません（デフォルト値で、必要に応じてプロパティの効果を無効にするために使用します）。

デフォルト値: clip。

例 . はみ出るテキスト

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

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

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

例 . overflow プロパティを追加

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

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

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

例 . ellipsis 値

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

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

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

例 . スクロールバー付き

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

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

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

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

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

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

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

例 . 1行のテキスト

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

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

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

例 . パーセント幅

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

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

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