safariでwebkit-line-clampによる行数制限が効かない

はじめに

👆画像のようなQiitaの記事をカードで表示するようなものを実装したところ、
Safariで👇のように潰れて表示されてしまった。

これを解消した時のメモ

環境

• Safari
  • 16.1（18614.2.9.1.12）

実装

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

この実装でGoogleChromeでは3行制限ができたが、Safariでは画像のように潰れてしまった

原因(おそらく)

Chromeでは上記の実装をするといい感じに指定行数の高さで、min-heightを設定してくれるが、
Safariではそれがないため、潰れてしまう。

解決

明示的にmin-heightを示すことでSafariでも潰れることなく表示されました

.content {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  min-height: 5em;
}