text-overflowプロパティの説明
CSSのtext-overflowプロパティは、行からテキストが溢れている状態の表現方法を指定します。これは、要素からはみ出すコンテツを制御したり溢れ方を変更するものではありません。あくまで、そのような状態になったテキストを、どのように見せるのかを定義するものです。
通常、要素の寸法に収まりきらなかったテキストは、切り取られたような状態で非表示になります。ユーザーから見れば、それが全文なのか途中で途切れてたのかが分からないことがあります。text-overflowは、そのような場面で続きのテキストが存在することを示すような印を提供できます。
text-overflowに指定できる値
clip- 行から溢れたテキストはコンテンツ・エリアの終端で切り取られます。これが初期値です。
ellipsis- 行からテキストが溢れる場合、省略記号（'…'）を表示します。この記号はコンテンツ・エリアの範囲内に表示されるため、テキストのサイズを圧迫する可能性があります。省略記号を表示する余白がなければ切り取られます。
fade（β）- 行からテキストが溢れる場合に、コンテンツ・エリアの終端付近からフェードアウトを始め、終端で透明になるような効果を与えます。
fade( <length> | <percentage> )（β）fadeの効果に適用範囲を指定する値です。寸法を明示する値、もしくはボックスの寸法に対する割合で指定します。<string>（β）- 行からテキストが溢れる場合に、任意の文字を表示させます。ここで指定された文字は、コンテンツ・エリアの範囲内に表示されるため、テキストのサイズを圧迫する可能性があります。
text-overflowの使い方とサンプルコード
text-overflowプロパティの構文は以下の通りです。
/* キーワード値 */
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つの値を指定して行の先頭と末尾に異なる処理を行えます。しかし、対応していないブラウザでは両方の値が無効になってしまうため、運用する場合には十分なテストを行って下さい。
<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>
.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 "[*]";
}