Written by Kasumi

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

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

目次

関連記事

HTMLCSS jQuery

【簡単】モーダルウィンドウをCSS、jqueryで作る方法

更新日:2022.09.09
1183
HTMLCSS

CSSで全ての同一要素に同じプロパティを適用する方法

2023.04.28
531
HTMLCSS

【CSS】font-sizeに最小・最大値を設定。その間をレスポンシブに可変させる方法

2022.12.31
3408
HTMLCSS プログラミング

CSSだけでhover(ホバー)したら画像を拡大させる方法【jQuery不要】

2022.01.03
1834