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

  • 50
    いいね
  • 4
    コメント

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