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

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

• Text overflow ellipsis on two lines - Stackoverflow

ポイント

リンク先の 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 を除いたブラウザは対応してくれていそうです。

• -webkit-line-clamp - MDN web docs

リンク

• 文字数制限をしないでCSSだけで「...」を表示する
• text-overflow: ellipsis が上手く動作しない？ 解決してあげよう。 - Qiita
• CSS text-overflow: ellipsis; not working? - Stackoverflow
• Text overflow ellipsis on two lines - Stackoverflow
• font-size vs line-height vs actual height - Stackoverflow