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。