snippet css web safari

Safariでwebkit-line-clampが効かない場合の解決方法二つ

本ページにはプロモーションが含まれる場合があります

【jQuery/CSS】指定行以降を三点リーダー(…)で省略する(1行・複数行・文字数)の記事をチェックしているときに、Safariで-webkit-line-clampを使った省略が機能していない事に気づきました。
調べた結果、2通り解決策が出てきました。それぞれ原因が異なります。

-webkit-line-clampを使った書き方は下記のとおりです。

CSS

.demo {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}

この4行は現時点では必須です。

min-heightを指定する

高さの計算がうまくいってなくて省略されていない又は重なって表示される場合はmin-heightを指定します。

CSS

.demo {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
min-height: 0;
}

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

visibility: hiddenを指定している場合

当サイトの場合はこちらが当てはまったのですが、-webkit-line-clampを使用している要素またはその祖先の要素にvisibility: hidden;を指定していると、Safariでは効かなくなってしまうようです。

使用しているケースはそれほど多くないかもしれませんが、ローディング等で親要素に指定している場合はopacityが使えると思います。

下記の記事がとても詳しくてわかりやすかったです。

参考：Safari（WebKit）ではvisibility hiddenの指定があるとwebkit-line-clampが効かない

指定行以降を三点リーダー(…)で省略する(1行・複数行・文字数)
【jQuery/CSS】指定行以降を三点リーダー(…)で省略する(1行・複数行・文字数)
行数単位で省略する、記事の抜粋や商品名等でたまに使うやつです。CSSの場合行数単位なので、文字数で切りたい場合はJS(今回はjQuery)を使います。

続きを見る

-snippet, css, web, safari