[CSS] 指定した行数でテキストを省略する方法

CSS

こんにちは、本日サイトを公開しましたArtsbeの石田です。

初めての投稿となるのはCSSを使用して指定した行数でテキストを省略する方法です。

コード

コードは下記になります。

See the Pen text-abridgement by ishida-hayate (@ishida-hayate) on CodePen.

下の赤い文字が省略されているのが分かると思います。

CODEPENだとレイアウトのためのCSSが記述されていますが、実際に必要なコードは下記のみです。

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; // 指定した行数で省略してくれる。
  overflow: hidden; // hiddenが無いとテキストが全て表示されてしまいます。
}

レイアウトを保つために指定した行数内に収める際に便利です。

短いですが、今回は以上になります！

INDEX