line-clampで文章を省略する

CSSのline-clampプロパティを使って、文章を複数行で省略してみます。

対応ブラウザ

line-clampの対応ブラウザはこちら
IEは非対応で、それ以外の主要ブラウザはベンダープレフィックス(-webkit)を付与することで対応しているようです。
　

サンプルコード

実際に設定して動作を試してみます。

<p class="omit"><a href="">ヘルエスタ王国</a>の第二皇女。文武両道学園主席、真面目で誰にでも優しくかなりの人望がある。王位継承の資格者として日々鍛錬や人とのコミュニケーションを大事にしている。</p>

<p class="omit">ボロボロの小屋で時間を忘れて錬金術の研究に明け暮れている。大人っぽい女性的な体に憧れており、<a href="">実はその研究をしているとかしていないとか。</a></p>

<p class="omit">寂れた和風喫茶で働く女の子。店長の趣味でメイド服を着せられている。足下に見え隠れする尻尾が本物かどうかは、触れた人のみぞ知る。満月の夜は何か不思議な事が起きるらしい？</p>

<p class="omit js-omit">いぬいどんどんすきになる</p>

<p class="omit js-omit">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus consectetur nisi, vel efficitur purus congue sit amet.</p>

display: -webkit-box; と -webkit-box-orient: vertical;、overflow: hidden; と組み合わせて使用します。

.omit {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	width: 300px;
	overflow: hidden;

	font-size: 14px;
}

これで2行目以降を省略できましたが、IEのみ省略ができていません。
複数行でも文章省略のデモページ
　

IEの対応

IEを別途対応する方法としては、疑似要素を使った方法やJavaScriptで実装する方法などありますが、今回は最大高さを設定してはみ出た行は非表示にする形にしてみます。
IE11用のハックで設定します。

@media all and (-ms-high-contrast: none) {
	.omit {
		max-height: 35px;
	}
}

省略の「…」は表示されませんが、これでIEでも2行目以降を省略することができました。
IEで複数行の文章省略をするデモページ
　

【参考サイト】

• -webkit-line-clamp – CSS: カスケーディングスタイルシート | MDN