【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プロパティを使ってみます。
これは、ユーザーに要素のリサイズをさせるかどうかを指定します。
縦方向、横方向、縦横両方向のリサイズを指定できます。

関連記事
この記事をはてなブックマークに追加

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

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

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2020/06 | 07
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.