如何在`word-break：break-all`中使用自动CSS连字符？

Question

我正在使用word-break: break-all;，想知道如何让浏览器自动插入hyphens，如MDN example所示。

div {
  width: 80px;
  height: 80px;
  display: block;
  overflow: hidden;
  border: 1px solid red;
  word-break: break-all;
  hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
}

<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

这样文本看起来像这样：

aaaaaaaa-
aaaaaaaa-
aaaaaaaa-
aaaaaaaa

我也创建了一个JSFiddle。

这需要在IE9 / IE10中工作，但是如果它也可以在Firefox和Chrome中工作，那就太好了。

Answer 1

-ms-hyphens属性仅在IE10 +中有效。在IE9或更低版本中是不可能的。

请参阅所提供参考链接底部的浏览器兼容性表。

[它在Chrome中尚不可用：WebKit Hyphenation

Answer 2

word-break属性和连字符是两个完全不同的东西。第一个最初主要用于东亚语言的语言，对英语这样的语言造成了不好的影响：它任意地削减了某些职位的工资，却没有表明单词被打断了。

因此，您应该确定是否有一个表达式，浏览器可以随时在其中插入换行符，或者是否要使用连字符。

对于断字，这样的CSS代码就可以了，尽管许多人建议将标准属性设置hyphens: auto放在前缀属性之后。但这要求使用（例如）在HTML标记中声明文字的语言。 <div lang=en>。此外，浏览器支持仍然有限：IE 9不支持这种连字符，并且IE 10中的支持涵盖了相对较小的一组语言（当然包括英语）。

对于IE 9上的自动断字，您需要使用服务器端编程的断字，或者更简单的客户端断字，并使用Hyphenator.js之类的工具。

Answer 3

如果浏览器支持＆，并且语言包括连字符字典，则会插入连字符。但是你的