我在用着word-break: break-all;并想知道如何让浏览器自动插入hyphens https://developer.mozilla.org/en-US/docs/CSS/hyphens，如在MDN 示例 https://developer.mozilla.org/samples/cssref/hyphens.html.
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 https://jsfiddle.net/LJYj3/2/ too.
这需要在 IE9/IE10 中工作，但如果它也能在 Firefox 和 Chrome 中工作，那就太好了。
The word-break属性和连字符是两个完全不同的东西。第一个最初主要针对东亚语言，但对英语等语言造成了不好的影响：它在某些地方任意删减单词，而不表明单词已被破坏。
因此，您应该决定是否有一个可以由浏览器在任意点插入换行符的表达式，或者是否需要连字符。
对于连字符，CSS 代码本身是可以的，尽管很多人会建议放置标准属性设置hyphens: auto最后，在前缀属性之后。但它要求在 HTML 标记中声明文本的语言，例如使用<div lang=en>。此外，浏览器支持仍然有限：IE 9不支持这种连字符，并且IE 10中的支持覆盖了相对较小的语言集（当然包括英语）。
对于 IE 9 上的自动连字，您需要使用服务器端编程的连字，或者更简单的客户端连字，例如Hyphenator.js http://code.google.com/p/hyphenator/.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
