ほんっとにはじめてのHTML5とCSS3：【54】テキストがはみ出る場合に「...」を付ける text-overflow

【54】テキストがはみ出る場合に「...」を付ける text-overflow

最終更新日：2020年03月30日　（初回投稿日：2020年03月30日）

ボックス内のテキストがオーバーフロー（はみ出す）している時、「まだ続きがあるよ」という意味で、行末に「...」を付けたりしますね。

こんなかんじで。テキストにまだ続きがあることを示すために「省略符（ellipsis）」を使います。

text-overflowプロパティは、この「...」などの省略符（ellipsis）を付けるかどうか決めるプロパティです。
white-spaceプロパティの値が「nowrap」だったり、長〜い英単語（URLやメアドとか）がある時は、テキストはオーバーフローします。
そのとき overflowプロパティの値が「visible」以外で、省略符（ellipsis）が必要なら、この text-overflowプロパティを使います。

white-spaceプロパティについては【37】空白を詰めるかどうか決める white-spaceプロパティ
overflowプロパティについては【20】overflowで、あふれた中身の表示方法を指定しよう
をご覧ください。

参考：
・CSS Basic User Interface Module Level 3 (CSS3 UI) | W3C Recommendation
・CSS Overflow Module Level 3 | W3C Working Draft
・text-overflow - CSS | MDN

text-overflowプロパティの値

text-overflowプロパティの値は、キーワードが2つだけです。

text-overflowプロパティの値
キーワード	clipがデフォルト値。省略符は付きません。 ellipsisは省略符を付けます。

値の継承	しない	適用できる要素	ブロックコンテナ要素

IE をはじめ、たいていのブラウザは対応しています（参考：Can I Use）
ただ、完全に対応しているのは Firefox だけみたい。

キーワード clip は、はみ出たテキストを切っちゃうだけ。

text-overflow: clip は、はみ出た部分を単に切るだけで「省略符（ellipsis）」は表示しません。

キーワード ellipsis は、行末に「省略符（ellipsis）」を表示します。
ellipsis（イリプシス）はそのまんま省略符という意味。
ブラウザにお任せの省略符（ellipsis）ですが、たいていは「...」が表示されます。

text-overflow: ellipsis は、テキストにまだ続きがあることを示すために「省略符（ellipsis）」を表示。

Firefox では下図のように、スクロールすれば残りのテキストが表示され、その行末にも省略符が表示されます。
これが仕様書の本来のプレビューみたい。

ですが、Chromeなどでは残りのテキストは表示されません。
Chromeでは overflow: hidden での使用を前提にしているようです。

とにかく、サンプルのHTMLはこちらです。
text-overflowプロパティはインラインで指定しています。

<div class="sample" style="text-overflow: clip">
text-overflow: clip は、（略）
</div>

<div class="sample" style="text-overflow: ellipsis">
text-overflow: ellipsis は、（略）
</div>

サンプルの <div>要素の CSS はこちら。
テキストが入ってる要素が「overflow: visible」以外の値じゃないと無効です。

.sample {
	width: 50%;
	height:3em;
	line-height:2;
	margin:1em 0 1.5em;
	border:solid 1px #ccc;
	padding:1em;
	white-space: nowrap;
	overflow: auto}

<string>（文字列）の値もあったんですが...

ここからは余談です。読み飛ばしてOK。

text-overflowプロパティは、一時期まで Basic User Interface Module Level 4 に載っていたのですが、その後 Overflow Module Level 3 に移動されました。

Basic User Interface Module Level 4 では、2つのキーワード（clip と ellipsis）以外に <string>という値もあって、任意のテキスト（続く...）などを表示できたりしました。
また、文章の前後に省略符を付けられたり、いろいろ面白そうだったのですが Overflow Module Level 3 に移されて、その値も無くなっています。

代わりに（？）、block-overflowプロパティが追加され、そこに <string>という値があるのですが、このプロパティ、仕様書に問題点として「プロパティ名も値も未解決で代替え案が提案されている」とあります。ですので、まあ当分使えることはなさそう。

とりあえず、せっかくなので <string>を使ったサンプルを貼っておきます。
text-overflow: '（続く→）' と、任意のテキストを ' ' や " " で囲んで値にします。

省略符に任意の文字列を指定しています。このサンプルでは text-overflow: '（続く→）' としています。

これ、対応しているのはFirefoxだけ。
Firefoxでは、下図のように表示されます。

文章の前後に省略付を付けるヤツも。
text-overflow: '（←）' ellipsis という指定をしています。
左側に（←）、右側には普通の省略符を付ける指定です。

スクロールしてください。省略符を2つ指定しています。左側の値は任意の文字列、右側は「ellipsis」を指定。

やはり対応しているのはFirefoxだけ。
Firefox では、スクロールした途中で下図のように表示されます。

ま、Firefoxでしか表示できないんじゃどうしようもない。
Overflow Module Level 3 は、ドラフトのまま 2018年以来動きがないようですし、どうなるでしょうかね。（2020年3月記）

次回予告

次回は、resizeプロパティを使ってみます。
これは、ユーザーに要素のリサイズをさせるかどうかを指定します。
縦方向、横方向、縦横両方向のリサイズを指定できます。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。