CSS で、はみ出したテキストを省略する

「ブロック内の文章を、3 行以上は表示させないようにして！」
「切れたところには ... 入れといて！」

あるある。

<div>  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis  
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore  
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt  
  in culpa qui officia deserunt mollit anim id est laborum.  
</div>  

↑ こんなの。

これ、地味に面倒なのよね。。。
1 行だけなら text-overflow: ellipsis が使えるんだけど、複数行には対応していない。
結局ボックスの高さ・幅や文字数見ながら JavaScript でゴニョゴニョしなきゃいけない。
半角/全角が混ざってたり改行ポリシーが変更されたりすると地獄。

救世主 -webkit-line-clamp

ググってみると、-webkit-line-clampっていう便利属性があるらしい。

いつものようにMDNさんで確認できます。
-webkit-line-clamp

ん？
-webkit-のベンダープレフィックスが必要ですが、Edge、Safariも含めてほぼ全対応になってる。
caniuse.com でも確認。

これ、IE 非対応案件 なら使えますね。うれしい。

サンプルコード

コードは以下 3 属性が基本セット。

.lorem {  
  display: -webkit-box;  
  -webkit-box-orient: vertical;  
  -webkit-line-clamp: 3;  
}  

• display: -webkit-box ･･･ line-clamp 使うなら-webkit-boxか-webkit-inline-boxのどちらか
• -webkit-box-orient: vertical ･･･ line-clamp 使うならvertical一択
• -webkit-line-clamp: 3 ･･･ 今回は 3 行までに制限

Bulma 環境ではもう 1 行必要

上記の CSS では 3 行でクランプ処理されるものの、4 行目以降も表示されてしまいました。
しかも要素の高さは 3 行分なので、次のコンテンツが上にかぶさってきてしまうという有様。

↑ こんなふうに。思ってたんと違う。

でも最小構成で試すと overflow: hidden なしでもちゃんと表示される。

Bulma か Markdown CSS が悪さしている模様。
.markdown-body クラスを消してもだめなので、 Bulma が持ってるリセット CSS と思われます。

このブログはBuefyを使っているので、それが影響しちゃってるんですね。

完成版

.lorem {  
  display: -webkit-box;  
  -webkit-box-orient: vertical;  
  -webkit-line-clamp: 3;  
  overflow: hidden;  
}  

overflow: hidden まで設定したら、確認です。
IE 以外のブラウザの場合、↓ が 3 行以降は省略されているはず。

Windows 10のChrome, FireFox, Edge、MacOS CatalinaのSafariで無事動作確認できました！
最強かよ・・・！！