CSS - マルチラインのラインクランプ（省略記号）は、私は、H3タグにこのクラスを適用

Question

problem image

働きません。

.ellipsis-2 { 
    $lines: 2; 
    $line-multiple: 1.3; 
    $font-size: 1em; 
    display: block; 
    display: -webkit-box; 
    max-height: $font-size * $line-multiple * $lines; 
    line-height: $font-size * $line-multiple; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    word-wrap: break-word; 
    -webkit-line-clamp: $lines; 
    -webkit-box-orient: vertical; 
} 

イメージで見たように、完全な行のテキストがあり、省略記号は表示されませんでした。

しかし、画面のサイズを変更すると省略記号が正常に機能します。

初めてページをレンダリングするときに問題が発生しました。

いずれか？

Answer 1

これはまだ1人の方が役に立ったかもしれません。

これは、-webkit-line-clampの要素には、最初にレンダリングしたときに可視性が非表示に設定されているか、直接または親のいずれかから継承することによって発生します。これはこのWebkitのバグのためです：-webkit-line-clamp is not respected when visibility is hidden。

回避策として、可視性の代わりに、可能であればdisplay: noneを設定することができます。