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 プログラミング

【簡単】checkbox(チェックボックス)のデザインをカスタマイズする方法【CSS】

2022.02.20
12587
HTMLCSS jQuery

【簡単CSS・jQuery】左から右に流れるようなテキストアニメーションを実装する方法

更新日:2022.09.09
4275
HTMLCSS

【CSS】formタグ内のデフォルトCSSをリセットする方法

更新日:2019.11.28
401
HTMLCSS

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

2023.04.27
263