CSS Chrome 55.0.2883.95 中的连字符行为更改

Question

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

从 55.0.2883.95（Mac 版本）开始，即使指定了 white-space: nowrap，似乎 hyphens: auto 也会自动换行。我同意同时指定连字符和 nowrap 听起来很愚蠢。但由于这是 "new" 行为，我想确认这是错误还是预期行为。

我创建了一个简单的 fiddle 来测试此问题以比较其他浏览器的行为。

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>

截图：

Chrome 在 Mac 55.0.2883.95（64 位）

Answer 1

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

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

Answer 2

我认为这是 chrome 的问题；相同的代码在 firefox 和 safari 中工作正常；

解决这个问题的方法，只需添加hyphens:none；进入你的截断 class.

CSS Chrome 55.0.2883.95 中的连字符行为更改

CSS hyphens behaviour change in Chrome 55.0.2883.95

css

nowrap

css-hyphens