Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8777

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

$
0
0

最新のFirefoxが対応した!!

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

line-clampとは?

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

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

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

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

現状のベストプラクティス

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


Viewing all articles
Browse latest Browse all 8777

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>