複数行にも対応！CSS を使ってはみ出した文字を「･･･」で省略する方法

範囲内に収まらない文字を「･･･」で省略する方法です。
使うのは CSS のみで、各ブラウザにも対応しています。

長い文章の冒頭だけ表示したいときってあると思います。
実現する方法としては、

・PHP 等を使ってサーバサイドで文字列を丸める
・text-overflow を使う

なんかがあると思います。
PHP なんかでは文字列を指定の幅でトリミングすることを「丸める」と言います。
なんか専門用語的で格好良いので
「ちょっとこの文字列丸めといて」
的に使うことをおすすめします。

しかし、上記2点の欠点として、

・PHP は文字数指定の省略なので、可変する幅に応じることができない
・text-overflow: ellipsis; は複数行に対応できない

が挙げられます。
使う場面が限定されすぎです。

そんな時に使って欲しいが今回の方法です。

デモ

デモページ

ウインドウの狭くしてもらうとわかると思いますが、幅が変わっても「･･･」はいつも右下にいます。
省略する必要がない場合は「･･･」は表示されません。

HTML

<p class="ellipsis">ダム(英: Dam)、堰堤(えんてい)は、治水、利水、治山、砂防、廃棄物処分などを目的として、川や谷を横断もしくは窪地を包囲するなどして作られる土木構造物。一般にコンクリートや土砂、岩石などによって築く人工物を指すが、ダムを造る動物としてビーバーがおり、また土砂崩れや地すべりによって川がせき止められることで形成される天然ダムと呼ばれるものもある。また、ダムは地上にあるものばかりでなく、地下水脈をせき止める地下ダムというものもある。このほか、貯留、貯蓄を暗示する概念的に用いられることがあり、森林の保水力を指す緑のダムという言葉がある。堰(せき、い、いせき)ともいうが、この場合は取水や水位の調節などが目的で、砂防目的のものは含まない。</p>

文字列を囲む要素に class=”ellipsis” と指定します。

CSS

.ellipsis {
	position: relative;
	height: 80px;
	overflow: hidden;
	line-height: 20px;
}

.ellipsis:before, .ellipsis:after {
	position: absolute;
	background: #fff;
}

.ellipsis:before {
	content: "･･･";
	bottom: 0;
	right: 0;
}

.ellipsis:after {
	content: "";
	width: 100%;
	height: 100%;
}

囲む要素 .ellipsis に height と line-height を指定して何行表示するかを決めます。
今回は一行の高さが 20px で 範囲の高さが 80px なので4行表示されます。

どういう仕組みでこうなるの？

行数の省略は、単純に .ellipsis 要素が overflow: hidden; しているだけです。

.ellipsis:before というのが「･･･」文字を表示する擬似要素です。
常に右下に張り付いて文字列の最後を隠しています。

ここで問題なのが、省略する必要がない場合も右下に「･･･」が表示されてしまうということです。

そこで活躍するのが .ellipsis:after 要素です。
常に文字列の直後にひっついていて、文字列が全て表示される場合には「･･･」の上に乗っかって消してしまう役割です。

今回のポイントは .ellipsis:after に top や left 等の位置指定をしないことです。
通常 position: absolute; は絶対位置を指定するときに使いますが、absolute した上で位置指定をしないとどうなるか･･･
なんと、親要素の文章の直後にピッタリついてくるんです。
これを利用して before 要素を更にマスキングしてるんですねー
うーんよくできてる。

欠点もありますが

ウインドウ幅を変える時に気づいたと思いますが「･･･」は絶対位置で上に乗っかってるだけなので中途半端な位置でも文字列を隠します。
最後の文字が半分だけ見えたりするわけです。

まあ、今回の方法は、省略ができることよりも、仕組みの方に感動して紹介しました。
この方法に気づいた人すげえ！です。