LoginSignup
179
145

More than 3 years have passed since last update.

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

Last updated at Posted at 2015-07-09

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

179
145
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
179
145