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

我使用word-break: break-all;，想知道我怎么能自动让浏览器插入hyphens，如在MDN example证明。如何使用带`word-break：break-all`的自动CSS连字符？

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正常工作。

来源

2013-03-07 chovy

的-ms-hyphens属性只能在IE10 +。在IE9或以下版本中不可能。

看到浏览器兼容性图表在您提供的参考链路的底部。

它不会在Chrome的工作尚未：如果浏览器支持&语言包括断字字典WebKit Hyphenation

来源

2013-03-07 02:01:47

截至2015年，世界还没有准备好css hyperns：http://caniuse.com/#feat=css-hyphens – 2015-06-15 15:04:02

连字符插入。但你

aaaaaaaaaaaaaaaaaa

是不是在字典。

因此，你必须去为软连字符像https://jsfiddle.net/LJYj3/5/

这里有更多的深思：https://stackoverflow.com/a/856322/1696030

来源

2013-03-07 02:05:30

你能解释一下jsfiddle的工作原理吗？我在哪里插入？ – user1380540 2016-03-17 17:12:47

@ user1380540您可以插入一个''，无论您认为适合用软连字符手动分隔单词。 – 2016-03-20 20:57:26

的word-break财产和断字是两个完全不同的事情。第一个原本主要用于东亚语言的语言主要对英语这样的语言产生不利影响：仲裁者主要在某些地方削减语言，而没有指出某个词语已被破坏。

所以，你应该决定你是否有在那里换行可以通过浏览器在任何时候，还是你想断字被插入的表达。

对于断字，CSS代码本身是确定的，尽管很多人会建议把标准属性设置hyphens: auto最后，前缀后的属性。但是它要求文本的语言用HTML标记来声明，例如， <div lang=en>。此外，浏览器支持仍然有限：IE 9不支持这种连字，并且IE 10中的支持涵盖相对较小的一组语言（当然包括英语）。

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

来源

2013-03-07 04:47:18

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

回答

相关问题