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

改行しつつ text-overflow ellipsis を使いたい

$
0
0

以下の回答をご確認ください。

ポイント

リンク先の SCSS を見ると heightを計算させています。これは -webkit-line-clampで指定された行の末尾だけが ...に変換されるからです。それ以降の行も普通に表示されてしまいます。それを避けるために heightを計算させています。

$font-size:26px;$line-height:1.4;$lines-to-show:3;h2{height:$font-size*$line-height*$lines-to-show;/* <--- ここに注目してください。 */font-size:$font-size;line-height:$line-height;-webkit-line-clamp:$lines-to-show;}

-webkit-line-clampは、ベンダープリフィックスがついていますが IE を除いたブラウザは対応してくれていそうです。

リンク


Viewing all articles
Browse latest Browse all 8582

Trending Articles



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