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

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

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

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

Answer 2

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

.line-clamp a:after { content: ""; }

Answer 3

这是一些旧版webkit浏览器中的错误。只需删除标签“a”的“href”，或者不要为标签“a”设置“-webkit-line-clamp”。新版本的chrome修复了这个bug。