Edited at

【CSS】複数行でも3点リーダーをきかせる

More than 1 year has passed since last update.


複数行でも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"いい方が可愛い。