如何在``word break: break-all`中使用自动CSS连字符？
我正在使用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中工作就更好了。
回答 4
Stack Overflow用户
发布于 2013-03-07 10:01:48
Stack Overflow用户
发布于 2013-03-07 12:47:19
word-break属性和连字符是两个完全不同的东西。第一个，最初主要是为东亚语言设计的，对像英语这样的语言有不好的影响:它在某些地方任意地切割单词，而不会发现一个单词已经断了。
因此，您应该决定是否有一个可以由浏览器在任何时候插入换行符的表达式，或者是否需要连字符。
对于连字，CSS代码本身是可以的，尽管许多人会建议将标准属性设置hyphens: auto放在属性前缀之后的最后。但它要求在超文本标记语言中声明文本的语言，例如使用<div lang=en>。此外，浏览器支持仍然是有限的:IE9不支持这样的连字，IE10中的支持涵盖了相对较小的语言集(当然包括英语)。
对于IE 9上的自动连字，您需要使用服务器端编程连字，或者更简单地，使用Hyphenator.js等工具进行客户端连字。
Stack Overflow用户
发布于 2013-03-07 10:05:30
如果浏览器支持& language包含连字符词典，则插入连字符。但是你的
aaaaaaaaaaaaaaaaaa
字典里没有。
因此，您必须像在https://jsfiddle.net/LJYj3/5/中一样插入软连字符­以满足您的要求
这里有更多值得思考的内容：https://stackoverflow.com/a/856322/1696030
https://stackoverflow.com/questions/15261605
复制相似问题
腾讯云开发者
