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。