• HTMLCSS

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だけで本文の行数を指定。三点リーダーを表示する方法について紹介しました。

以上で解説を終わります。