css - 带有线夹的 Safari 中的省略号无法正常工作

Question

我正在使用 line-clamp 将博客中的标题限制为最多两行。它在 Firefox 和 chrome 中运行良好，但在 safari 中，省略号没有出现在它应该出现的位置，而是在句子的中间。

我正在使用 bootrap 4，但也发生在使用 Foundation 6 制作的另一个元素中，似乎在将 flex 用于网格时发生。

<div class="row">
    <div class="col-6">
        <h1 class="title">
            <a href="#">Long title goes here</a>
        </h1>
    </div>
</div>

和 scss

$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, consectetur
吸脂精英。知乎...

相反，我得到了这个:

Lorem ipsum dolor 坐 amet, consectetur
adipiscing el... Etiam luctus dapibus

Answer 1

而不是将线夹 css 分配给 h1分配给 具有长文本的元素 在这种情况下，它是 <a href="#">Long title goes here</a> .