css - 多行的行夾（省略號）不起作用

Question

problem image

我把這個類應用到h3標籤。

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

正如你在圖像中看到的，有完整的文本行和省略號沒有顯示。

但是，當我調整屏幕，省略號工作正常。

問題僅發生在第一次頁面呈現。

任何adivce？

Answer 1

幾乎一歲的帖子，仍然回答，因爲這可能有助於某人。

如果具有-webkit-line-clamp的元素在第一次呈現時將其可見性設置爲隱藏，則可能會發生這種情況，無論是直接還是從它的父級繼承。這是由於這個webkit的bug：-webkit-line-clamp is not respected when visibility is hidden。

作爲替代方法，您可以在可能的情況下設置display: none。