text-overflow:行からテキストが溢れている状態の表現方法を指定する

初期値 clip
適用対象 ブロックコンテナ
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

text-overflowプロパティの説明

text-overflowは、行からテキストが溢れている状態の表現方法を指定します。これは、要素からはみ出すコンテツを制御したり溢れ方を変更するものではありません。あくまで、そのような状態になったテキストを、どのように見せるのかを定義するものです。

通常、要素の寸法に収まりきらなかったテキストは、切り取られたような状態で非表示になります。ユーザーから見れば、それが全文なのか途中で途切れてたのかが分からないことがあります。text-overflowは、そのような場面で続きのテキストが存在することを示すような印を提供できます。

text-overflowに指定できる値

clip
行から溢れたテキストはコンテンツ・エリアの終端で切り取られます。これが初期値です。
ellipsis
行からテキストが溢れる場合、省略記号('…')を表示します。この記号はコンテンツ・エリアの範囲内に表示されるため、テキストのサイズを圧迫する可能性があります。省略記号を表示する余白がなければ切り取られます。
fade(β)
行からテキストが溢れる場合に、コンテンツ・エリアの終端付近からフェードアウトを始め、終端で透明になるような効果を与えます。
fade( <length> | <percentage> )(β)
fadeの効果に適用範囲を指定する値です。寸法を明示する値、もしくはボックスの寸法に対する割合で指定します。
<string>(β)
行からテキストが溢れる場合に、任意の文字を表示させます。ここで指定された文字は、コンテンツ・エリアの範囲内に表示されるため、テキストのサイズを圧迫する可能性があります。

text-overflowの使い方とサンプル

text-overflowプロパティの構文は以下の通りです。

CSS
/* キーワード値 */
text-overflow: clip;
text-overflow: ellipsis;
text-overflow: "[続き]";
text-overflow: ellipsis clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis "[*]";

/* グローバル値 */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: unset;

text-overflowの実例

それでは実際にtext-overflowプロパティの書き方を見ていきましょう。以下の例は、寸法を固定した段落に超過するテキストを配置した時の比較です。

一部のブラウザでは、2つの値を指定して行の先頭と末尾に異なる処理を行えます。しかし、対応していないブラウザでは両方の値が無効になってしまうため、運用する場合には十分なテストを行って下さい。

表示確認
CSS
.samp_box {
	padding: 1rem;
	background: #eee;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-auto-rows: auto;
	gap: 1rem;
}
.samp_box > section {
	overflow: auto;
	padding: 0 1rem 1rem;
	background: #fff;
}
section > h1 {
	margin: 1rem 0 0;
	font-size: 1rem;
	font-weight: normal;
}
section > p {
	overflow: hidden;
	height: 2rem;
	margin: 1rem 0 0;
	white-space: nowrap;
	border: 1px solid #666;
}
.to_1 p {
	text-overflow: clip;
}
.to_2 p {
	text-overflow: ellipsis;
}
.to_3 p {
	text-overflow: "[続き]";
}
.to_4 p {
	text-overflow: ellipsis clip;
}
.to_5 p {
	text-overflow: ellipsis ellipsis;
}
.to_6 p {
	text-overflow: ellipsis "[*]";
}
HTML
<div class="samp_box">
	<section class="to_1">
		<h1>text-overflow: clip;</h1>
		<p>Text text text text text text. ABC DEFG HIJKLMN OPQRSTU VWXYZ.</p>
	</section>
	<section class="to_2">
		<h1>text-overflow: ellipsis;</h1>
		<p>Text text text text text text. ABC DEFG HIJKLMN OPQRSTU VWXYZ.</p>
	</section>
	<section class="to_3">
		<h1>text-overflow: "[続き]";</h1>
		<p>Text text text text text text. ABC DEFG HIJKLMN OPQRSTU VWXYZ.</p>
	</section>
	<section class="to_4">
		<h1>text-overflow: ellipsis clip;</h1>
		<p>Text text text text text text. ABC DEFG HIJKLMN OPQRSTU VWXYZ.</p>
	</section>
	<section class="to_5">
		<h1>text-overflow: ellipsis ellipsis;</h1>
		<p>Text text text text text text. ABC DEFG HIJKLMN OPQRSTU VWXYZ.</p>
	</section>
	<section class="to_6">
		<h1>text-overflow: ellipsis "[*]";</h1>
		<p>Text text text text text text. ABC DEFG HIJKLMN OPQRSTU VWXYZ.</p>
	</section>
</div>

text-overflowに関連するCSSプロパティ

テキスト関連
text-align ボックスに含まれる内容の横位置の揃え方を指定する
text-align-last ボックスに含まれる内容の最後の行を揃える位置を指定する
text-combine-upright 一文字分の空間に挿入する文字の組み合わせを指定する
text-decoration 文字の装飾線に関する値を一括で指定する
text-decoration-color 文字に加えられた装飾線の色を指定する
text-decoration-line 文字に加えられた装飾線の種類を指定する
text-decoration-skip-ink 装飾線が文字を通過する祭の処理を指定する
text-decoration-style 文字に加えられた装飾線の形状を指定する
text-decoration-thickness 文字に加えられた装飾線の太さを指定する
text-emphasis テキストに付加する圏点、傍点、脇点に関する値を一括で指定する
text-emphasis-color テキストに付加する圏点、傍点、脇点の色を指定する
text-emphasis-position テキストに付加する圏点、傍点、脇点の位置を指定する
text-emphasis-style テキストに付加する圏点、傍点、脇点の記号を指定する
text-indent テキストの一行目に挿入するインデントの幅を指定する
text-justify テキストの行端揃えに対して均等割り付けの方法を指定する
text-orientation 縦書きモードの文字の向きを指定する
text-overflow 行からテキストが溢れている状態の表現方法を指定する
text-shadow 文字に影(ドロップシャドウ)を付ける
text-transform テキストの大文字・小文字の表記を指定する
text-underline-position 文字の下に引かれる装飾線の位置を指定する