【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;
}
visibility: hiddenを指定している場合
当サイトの場合はこちらが当てはまったのですが、-webkit-line-clampを使用している要素またはその祖先の要素にvisibility: hidden;を指定していると、Safariでは効かなくなってしまうようです。
使用しているケースはそれほど多くないかもしれませんが、ローディング等で親要素に指定している場合はopacityが使えると思います。
下記の記事がとても詳しくてわかりやすかったです。
参考：Safari（WebKit）ではvisibility hiddenの指定があるとwebkit-line-clampが効かない
-
【jQuery/CSS】指定行以降を三点リーダー(…)で省略する(1行・複数行・文字数)
行数単位で省略する、記事の抜粋や商品名等でたまに使うやつです。CSSの場合行数単位なので、文字数で切りたい場合はJS(今回はjQuery)を使います。続きを見る
