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

最新の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や擬似要素で無理やり実現する方法などで対応しましょう。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
問題のあるコメントを報告する

-webkitなので正式になったときに、ちゃんと追従しないとですね。

# 正直、ベンダプリフィックスの時点で対応といっていいのか(おためしのはず)という気持ちはあるし、ベンダプリフィックスありきで作って放置系とか見るとIE6再来感があってアレなので...

問題のあるコメントを報告する

@tsuyoshi_cho さん
そうですね…CSSで一番対応を望むプロパティーなのでしっかり追従します。
今は-webkitありきなので、正式になったら一括置換は必要ですね…!

Sign up for free and join this conversation.
If you already have a Qiita account