CSS：-webkit-line-clampで文章を省略し、末尾に記号(...)を付ける

だま
だま

はじめに

IEのサポートが終了したので色んなCSSが気兼ねなく使えるようになりましたね。

という事で今回はCSSだけで文章を省略&文末に省略記号を追加できるline-clampを紹介します。

IEがあるから...IEがあるから...と唇を噛みながらjsで書いたりなどしていましたが、もう何も怖いものはありません。
すでに8月になってしまいましたが、このline-clampを活用すれば爽やかな夏を過ごせる事間違いなしです。

使用例

こんな感じの文章が

スクリーンショット-2022-08-03-133732.png

↓こうなります。

スクリーンショット-2022-08-03-133755.png

CSSの書き方

文章の要素に対して、下記のようにCSSを指定します。

.text-omit{
	display: -webkit-box;
	-webkit-line-clamp: 3; /* 行数を指定する */
	-webkit-box-orient: vertical;
	overflow: hidden;
}

-webkit-line-clampを適用するには、

  • display: -webkit-box;
  • -webkit-box-orient: vertical;
  • overflow: hidden;

を一緒に指定する必要があります。 また、ベンダープレフィックス(-webkit-)が無いと動きません。

上の例では-webkit-line-clampに3を指定しています。これで、3行目の末尾に省略記号を付けてくれます。

レッツエンジョイサマー

関連記事