216
141

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

CSSで複数行3点リーダーを実現する「line-clamp」がついにIE以外に対応したよ!

Posted at

#最新のFirefoxが対応した!!
これにより、IEさえ無視すれば完全にCSSのみで複数行の3点リーダーが実現可能となりました。
よく使う割に難しい処理だったので、地味に嬉しいです。
最新の対応状況はこちら

##line-clampとは?
行数を指定して、テキストが領域をはみ出した時に3点リーダ「…」を表示することができます。

スクリーンショット 2019-10-30 16.41.29.png

//css

 p {
   width: 170px;
   display: -webkit-box;
   -webkit-line-clamp: 4; //3点リーダを表示する行数を指定
   -webkit-box-orient: vertical;
   overflow: hidden; 
}

たったこれだけで実現できちゃいます。
詳しくはこちらの記事でわかりやすく書かれています。

##現状のベストプラクティス
・IE以外で簡単に実現できるようになったので、基本line-clampを使いましょう。
・IE対応が必要な場合は、引き続きIEのみ従来のJSや擬似要素で無理やり実現する方法などで対応しましょう。

216
141
2

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
216
141

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?