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

行数の指定、その行数を超えた場合に非表示にする(cssのみ)

$
0
0

cssだけで行数の指定をするやり方
①2行以上の時は文字を非表示にする
②2行以上の時は二行目の最後に三点リーダーをつける

※jsでもできます。
②のやり方だとIE11非対応です。(多分)

index.html
<pclass="line_wrap">テキストの文章を2行を超えたら表示したく無いです。且つ、レスポンシブ対応にしたいです。</p>

①2行以上の時は文字を非表示にする

style.css
.line_wrap{overflow:hidden;height:3.6em/* 2em(行)x line-heightの1.8 */font-size:16px;line-height:1.8;}

表示したい行数 * line-height
をheight(単位em)にしてoverflow:hiddenするだけ。
3天リーダーはありませんが、2行以上の場合は文字が表示されません。
スクリーンショット 2020-03-10 17.42.29.png

②2行以上の時は二行目の最後に三点リーダーをつける

style.css
.line_wrap{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}

2行以上の場合はちゃんと三点リーダーが表示されます。(レスポンシブ対応)
スクリーンショット 2020-03-10 17.40.59.png
どちらがいいかはお好みで。

参考サイト

https://coliss.com/articles/build-websites/operation/css/css-line-clamp-property.html


Viewing all articles
Browse latest Browse all 8767

Trending Articles



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