More than 1 year has passed since last update.

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

Last updated at 2023-02-05Posted at 2023-02-05

はじめに

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

これを解消した時のメモ

.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;
}