設定行数以上の文章を三点リーダーで表示する方法

CSSにて、設定行数以上の残りの文字を三点リーダー（…）で表示する方法を紹介します。

文字数で判定といった処理ではなく、表示される行数で判定し、残りの文章を三点リーダーで表示させる方法です。

SP表示では2行、PC表示では3行まで表示といった場合分けなども可能となります。

コード

.ellipses-text-area {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; 
  overflow: hidden;
}

2~4行目

今回の三点リーダー表示には、この3つの設定が必要です。

4行目 -webkit-line-clamp

こちらに設定行数を指定します。

-webkit-line-clamp: 2;ならば2行目以降のテキストが…で表示されるようになります。

5行目 overflow: hidden;

overflow: hidden;を設定することで…以降のテキストを非表示にします。

デモ

See the Pen Untitled by yoshi (@mikanbako) on CodePen.