`text-overflow: ellipsis;` 在 <a> 中的行为与在 <p> 中的行为不同

Question

我有这样的文字：

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

通常text-overflow: ellipsis; 将... 放在文本行的末尾，如下所示：

Lorem ipsum dolor sit amet, consetetur sadipscing elit...

但在我的情况下，查看的文本是这样的：

Lore... dolore magna aliquyam erat, sed diam voluptua.

当我使用这个 CSS 时：

p, a {
  max-width: 400px;

  overflow: hidden;
  text-overflow: ellipsis;

  display: block;
  display: -webkit-box;

  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;

  font-weight: normal;
  font-family: "Arial", sans-serif;
  text-decoration: none;
}

---

我在 CodePen (http://codepen.io/DerZyklop/pen/cDKFh) 中重新构建它，并发现省略号在 <a> 中的行为与在 <p> 中的行为不同。使用最新版本的 Chrome，我从我的 CodePen 中看到了这个结果：

知道为什么会这样吗？

Answer 1

造成显示差异的属性是

display: -webkit-box;

由于该属性仅存在于older version of the Flexbox specification 中，因此您应该删除它。除非你有特定的原因吗？

编辑：看起来您正试图限制块 using an unsupported Webkit property 中的行数。这可能是个坏主意，因为不受支持的属性可以随时更改其行为，恕不另行通知。

也就是说，aren't many good ways to achieve that effect 没有 Javascript

Answer 2

虽然我不完全确定原因，但我确实有解决方案。

我认为因为p 标准是块元素，而a 是内联元素，所以overflow: ellipsis 的处理方式不同。

要解决这个问题，只需添加white-space: nowrap;，使文本保留在 1 行。使用 webkit-only css 势必在其他浏览器中出现问题。

p, a {
  max-width: 400px;

  overflow: hidden;
  text-overflow: ellipsis;

  display: block;

  white-space: nowrap;

  font-weight: normal;
  font-family: "Arial", sans-serif;
  text-decoration: none;
}

---

编辑：在对其进行了更多研究之后，我首先发现了它为什么不同。当文本溢出它的容器（因此得名）时，文本溢出起作用。只有块元素可以有固定的宽度和高度，使得只有块元素容易发生任何形式的溢出。

这就是为什么当它们获得显示块时它在两个元素上的工作方式相同（因此它们都是块元素，a 元素不是默认情况下），并且它们得到它们的宽度和高度放。在这种情况下，高度没有设置，但由于white-space: nowrap;，元素知道它不应该转到下一行，并且所有文本都在右侧溢出，因为它不能转到新行。

除此之外，并引用@Gareth（请参阅我的回答下的 cmets，以及他自己的回答）：

“为什么会发生”是因为您使用的是属性 display: -webkit-box ，它没有任何固定的行为。没有关于它的文档，因为它来自旧规范并且不是应该使用的属性。

Answer 3

在<a> 中使用<span>：

<a href="#"><span>Raspberry Pi and Synology NAS for XBMC and BitTorrent. The tv-show automation plans.</span></a>

see the code

虽然，不确定display: -webkit-box; 做了什么。但它似乎有一种奇怪的行为。尝试改用display: block。