关于css：省略号在带线夹的Safari中无法正常工作

Ellipsis not working correctly in Safari with line-clamp

我正在使用换行器将博客中的标题限制为最多两行。它在Firefox和chrome中可以正常工作，但在野生动物园中，省略号不会出现在应有的位置，而是出现在句子的中间。

我正在使用bootrap 4，但也发生在使用Foundation 6创建的另一个项目中，似乎是在将flex用于网格时发生的。

1 2	<h1 class="title"> Long title goes here

和scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$enh1-font-size: 50px;
$enh1-line-height: 60px;
$enh1-lines-to-show: 2;
.title {
display: block;
display: -webkit-box;
max-height: $enh1-line-height*$enh1-lines-to-show;
margin: 0 auto;
font-size: $enh1-font-size;
line-height: $enh1-line-height;
-webkit-line-clamp: $enh1-lines-to-show;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

结果应如下所示：

Lorem ipsum dolor坐在amet，安全
忠实的精英。 Etiam luctus dapibus ...

相反，我得到了：

Lorem ipsum dolor坐在amet，安全
adipiscing el ... Etiam luctus dapibus

在这种情况下，不是将行钳css分配给h1，而是将其分配给具有长文本的元素，而将其分配为Long title goes here。