以下の回答をご確認ください。
ポイント
リンク先の 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 を除いたブラウザは対応してくれていそうです。
リンク
- 文字数制限をしないで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
あと CSS variables を Vue.js の中で使おうとしたら、少し引っかかる。