CSSで長いテキストを「…」で省略する方法

CMSなどで、本文やタイトルを高さの決まった一に配置するとき、テキストが長くて省略したいときがあります。
JSやそもそも吐き出すPHPで文字数制限をするのもいいですが、ウィンドウサイズによって予期せぬ改行が入る場合があります。
今回はCSSだけで実装する方法を紹介します。

 

CSSだけで長いテキストを「…」で省略する方法

早速CSSだけで長いテキストを省略していきましょう！
今回メインで使用するCSSはこちら。

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

 

 

1行のテキストを「…」で省略する

pタグに100pxを指定しているので、超えてはみ出たテキストはすべて省略され、「テキストが入ります。テキ…」のようになります。

＜HTML＞

<p class="text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>

 

＜CSS＞

p {
    width: 100px;
}

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

 

 

複数行のテキストを省略する

「-webkit-line-clamp」で省略したい行数を指定します。
4行にしたい場合は、「-webkit-line-clamp: 4;」

横幅100pxを超えてはみ出た文はすべて省略され、
「テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります…」のようになります。

＜HTML＞

<p class="text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>

 

＜CSS＞

p {
    width: 100px;
}

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

 

CSSだけで簡単に実装することができるので、CMSのニュース部分などで重宝します。