html - 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

希望这对将来遇到类似问题的人有所帮助。

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

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