Webkit Line Clamp截断中间的链接

Question

我有一个链接

<div class="module line-clamp">
   <a href='some url' target="_self">some really long text</a>
</div>

和这个CSS

.module {
  width: 250px;
  overflow: hidden;
}
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
}

我想在3行文本之后将其截断，并在末尾添加省略号

some
really
long ...

实际发生的是

some
really ...
text

如果我将html更改为

<div class="module line-clamp">
   <p>some really long text</p>
</div>

然后我得到了

some
really
long ...

我错过了什么？

这里是JSFiddle。

Answer 1

希望这可以帮助将来遇到类似问题的人。

这个简单的问题有一个简单的解决方案。我在锚的文本周围放了一个p标签

<div class="module line-clamp">
   <a href='some url' target="_self"><p>some really long text</p></a>
</div>

Answer 2

在阅读Sachin的回答之后，我尝试添加一个空的：在伪元素之后，它也做了诀窍：

webpack://...

Answer 3

这是某个旧版webkit浏览器中的错误。只需删除标记“a”的“href”，或者不要为标记“a”设置“-webkit-line-clamp”。新版本铬已经修复了这个错误。