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行以上の場合は文字が表示されません。
②2行以上の時は二行目の最後に三点リーダーをつける
style.css
.line_wrap{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
2行以上の場合はちゃんと三点リーダーが表示されます。(レスポンシブ対応)
どちらがいいかはお好みで。
参考サイト
https://coliss.com/articles/build-websites/operation/css/css-line-clamp-property.html