複数行でも3点リーダーをきかせる
1行で3点リーダー
css
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
まぁ普通に3点リーダーになりますよね。
複数行で3点リーダー
Chrome・Safari でしか実装できませんが（今後はIEとかでも使えるようになる事を期待）下記のように書きます。
css
p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
複数行での3点リーダー実装するために、
”display: -webkit-box;”
”-webkit-box-orient: vertical;”
指定をします。
display属性を”box”とすることでフレキシブルボックス状態になり、
”-webkit-line-clamp”で指定した行までを表示するようになります。
box-orientはそのフレキシブルボックスの並び方向を指定しverticalと指定する。
overflow: hidden;をスクロールバー対策として追加しました。
普通であれば高さを指定するために”font-size””line-height”を元に高さを割り出し増すが、その必要がないのでお手軽にコードが書けるのと、リキッドレイアウトにも対応。
ただし”IE””Firefox”は現時点では使えない場合も多いので要注意。
それにしても"clamp"いい方が可愛い。