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

CSSでテキストを指定した行数で省略（省略記号 … を表示）する方法をご紹介します。

実装例

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

下の「省略あり」のほうが一行に省略されているのが分かると思います。

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

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

ポイント

• -webkit-line-clamp に行数を指定することで、その行数以降を省略できます。
• overflow: hidden を設定しないと省略されず、全文表示されてしまうので注意してください。

複数行テキストをきれいにレイアウト内に収めたいときに、とても便利なテクニックです。

今回は以上となります。
CSSのテキスト省略はブログやニュースサイトの一覧表示などでも頻繁に使用するので、ぜひ覚えておいてください。