はじめに
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2985550%2F557d8bcf-0b00-563c-52fc-eef4a6f23373.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=2d426f3d126ed7e49fc0307357cf210a)
👆画像のようなQiitaの記事をカードで表示するようなものを実装したところ、
Safari
で👇のように潰れて表示されてしまった。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2985550%2F3064d4f5-ee56-ad5e-e148-1d59571154a7.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=9c3662fd9f134f0e1326e5d5427532fb)
これを解消した時のメモ
環境
- 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;
}
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2985550%2F0e7ee2f8-af83-d01e-abf4-363abe2cbad5.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=75039d96b10e2cd9501708bd8e032488)