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的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;元素知道它不应该转到下一行，并且所有文本都在右边溢出，因为它可以＆＃39;转到新的一行。

除此之外，引用@Gareth（参见我的回答中的评论和他自己的回答）：

＆＃34;为什么会发生＆＃34;是因为您正在使用属性显示：-webkit-box没有任何固定的行为。没有关于它的文档，因为它来自旧规范，并且它不是应该使用的属性。

Answer 3

在<span>：

中使用<a>

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

`text-overflow：省略号;`<a> than in <p></p></a>中的行为不同

3 个答案: