複数行にも3点リーダー(「…」)を表示する

-webkit-line-clamp によって
webkit系のブラウザにおいて
複数行のテキストにも三点リーダーが表示できるということで
demo をつくってみるテスト。
 
 
demo 『webkit-line-clamp』 CodePen

See the Pen webkit-line-clamp by sekiyaeiji (@sekiyaeiji) on CodePen.


 
 
以下の4つのプロパティで表現しています。

display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;

 
終端に設定したい行数を
この -webkit-line-clamp に値として設定するのですね。

-webkit ベンダープレフィックスが記述されていることからわかる通り
webkit系ブラウザのみで再現されます。

ただし、iOSやAndroidの旧バージョンのブラウザにおいて
すべて正しく動作する保証はありません。
 
 
1行のテキストにおける三点リーダーの場合は
以下のように

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

 
によって表現できたわけですが
webkit系ブラウザ以外でも徐々に複数行の3点リーダー表現が
可能になりそうです。