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

How to use automatic CSS hyphens with `word-break: break-all`?

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

1
2
3
4
5
6
7
8
9
10
11

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;
}

1	aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

这样文本将如下所示：

1
2
3
4

aaaaaaaa-
aaaaaaaa-
aaaaaaaa-
aaaaaaaa

我也创建了一个JSFiddle。

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

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

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

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

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

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

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

它不适用于Chrome：WebKit断字