CSSだけで行数を指定。三点リーダーを表示する方法

CSSだけで本文の行数を指定。三点リーダーを表示したい。
本記事ではこのような悩みを解決します。
実装サンプル
See the Pen
CSSで行数を指定。三点リーダーを表示する方法 by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
CSSで行数を指定したコード例です。
本文の幅に合わせて、行数が3行になるように調整してます。
実装手順は以下の通りです。
line-clampを使って行数を指定する
p {
display: -webkit-box;
/*行数指定*/
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
行数を指定したい要素にline-clampプロパティを付与します。
ベンダープレフィックスを用いて、以下4つのプロパティを付与します。
display: -webkit-box;
-webkit-line-clamp: 行数を指定;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clampプロパティに省力する行数を指定します。
以上で実装完了です。
まとめ
CSSだけで本文の行数を指定。三点リーダーを表示する方法について紹介しました。
以上で解説を終わります。
目次