CSSで複数行の末尾を「…」で省略する方法

@kasumiiです。こんにちは。

CSSで長い文章の最後に三点リーダー（…）をつけて省略したいという場合。

1行であれば、以下の方法ですんなりいけます。

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

ちょっと困るのは、複数行のとき。

WebKitのみになりますが、とても便利な方法があったのでメモ。

横幅を指定しないので幅が変わってもOKだし、-webkit-line-clampの数値を変えるだけで自由に行数も指定可能。

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;

WebKitのみですが、iPhoneやAndroidなどスマホ対応だけでいい場合はバッチリ使えますね！

ちなみに、JavaScriptでやりたいとか、IEやFirefoxにも対応させたいという方は、以下のページも参考にどうぞ。

-webkit-line-clamp を使う