2

似乎将“连字符”设置为“自动”现在比“空白：nowrap”具有更高的优先级。在以前版本的 Chrome（Mac 中的 54 之前）和其他浏览器（FF、Safari、IE）中，似乎“空白：nowrap”的出价高于连字符。因此，如果您指定 white-space: nowrap 和 text-overflow: ellipsis，您会看到无论连字符设置如何，文本都会被省略号截断。

从 55.0.2883.95（Mac 版）开始，似乎连字符：auto 即使指定了 white-space: nowrap 也会进行换行。我同意同时指定连字符和 nowrap 听起来很愚蠢。但由于这是一种“新”行为，我想确认这是一个错误还是预期的行为。

我创建了一个简单的小提琴来测试这个问题，以比较其他浏览器的行为。

div {
  width: 75px;
  border: 1px solid black;
}
div.testCls {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
<div lang="en" class="testCls">Anextremely long English word</div>

截图：

Mac 55.0.2883.95（64 位）中的 Chrome

4

2 回答 2

0

至于 Chrome 使用hyphen: auto，如果您查看caniuse，您会发现autoChrome 的属性不受支持。当我对此进行测试时，Chrome 中没有显示连字符（除非您使用连字符手动方法）。

根据您的问题，我没有找到正式的文档来回答您的问题，但我在 Chrome、Firefox 和 IE（在 Windows 上）上测试了您的代码，发现white-space: nowrap;在所有情况下使用都会导致文本没有连字符。只要nowrap使用该值，这也会导致overflow: hidden;元素并按text-overflow: ellipsis;预期工作，因为这两个元素都需要非换行文本来展示它们的属性。希望有帮助

于 2017-01-03T19:54:32.717 回答
0

我相信这是chrome的问题；相同的代码在 Firefox 和 safari 中运行良好；

解决这个问题的方法，只需添加连字符：无；进入你的截断类。

于 2017-01-04T03:13:20.067 回答