【CSS】text-overflow: ellipsis;を使って はみ出した文字を「・・・」で省略

CSSの小技 その5
今回は「text-overflow: ellipsis;を使って はみ出した文字を「・・・」で省略」です。
ブログの記事などで最初の数行を表示して残りを「・・・」や「続きを読む」などで省略するのを見かけます。
ブログだけでなく、Webサイト制作でスマホ対応をする際に、ニュースのタイトルや記事など文字数が確定していない部分について
スマホの縦表示でも横表示でも綺麗にレイアウトするためにこの手法が便利でした。

本ブログのトップページでは［・・・］を使って省略しています。
これをtext-overflow: ellipsis;を使ってCSSのみで表現することが可能です。

text-overflowプロパティとは

テキストが表示領域からはみ出している（隠れてしまった部分がある）事をブラウザ上で表示するためのプロパティです。
最近の主要ブラウザでは問題なく動作するようです。

実装方法

HTML

CSS

アレンジ

「・・・」を「…」や「,」など任意の記号にしたり、記号を使わずに切り取るだけにすることも可能ですが、
こちらの機能はFirefoxのみの対応で、その他のブラウザでは通常の「・・・」が表示されるようですので汎用性はあまり高いとは言えません。

HTML

CSS

他にも・・・

はみ出たテキストのお尻側を省略するのではなく冒頭のテキストを省略したり、
冒頭とお尻側両方を省略したり、さらに冒頭とお尻で別の記号を用いたりと
「そんな使い方するかなぁ」といったことも出来るようです。
ちょっと用途が思いつきませんが、そんなこともできるよと言うことだけ覚えておくと
何か役に立つことがあるかもしれません。

この記事を読んだ方はこちらも読まれています

【解決法】Safariではinput要素をCSSの「display: none;」で消すことができない