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
1307
HTMLCSS

CSSで直前・後方の兄弟要素を指定する方法

2023.04.27
7161
HTMLCSS

CSSで透過グラデーションを作成する方法

2023.01.20
5477
HTMLCSS プログラミング

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

2022.01.03
2173