关于CSS属性word-break

偷个懒，把以前写的东西发上来，占个位。写于2008年11月5日。

最近发现word-break:break-all有被滥用的趋势。新浪和无数的BBS都在用这CSS3的属性。目的当然很清楚：允许在很长的英文字母序列之中断行，而不至造成行长引致的横向滚动条。但是这带来了很多问题：主要浏览器对CSS3草案中的word-break解释各不相同。

CSS3草案 支持五个属性值：normal，keep-all，loose，break-strict，和break-all。其中对break-all声明使用“松散”的规则处理CJK文字（中文，日文，韩文）。break-strict才使用标准的CJK文字断行规则，就像IE里的break-all。详见上面的URL。

Internet Explorer 支持两个属性值：break-all和keep-all。break-all相当于CSS3草案中的break-strict（而非break-all），对非CJK文字的断行产生影响。

Firefox的搜索结果表明其不支持word-break。

Safari/WebKit 支持三个属性值 ： break-all，break-word，和normal。实测结果表明，break-all导致任何位置都可以断行，包括中文句号之前。而break-word则是大部分Web开发人员真正想要的：仅在必要的时候才在无空格的英文字符之间断行。

看起来，这是我目前经常在Safari中看到错误的中文断行的关键原因了！

综上所述，目前的这个“word-break:break-all”在IE中起到了一定作用，但在FF中不起作用，在Safari/WebKit中有影响中文排版的副作用。按当前CSS3草案的正确属性值目前没有浏览器支持！

幸好，网上有人提出了解决方案，看起来还不错：

http://www.aspxhome.com/design/css/200710/213424.htm

简单地说，就是不使用word-break，而使用

word-wrap:break-word; overflow:auto;

各位对Web开发有影响的同志不妨试试这个新方法，改善浏览器的兼容性问题。目前，Firefox/Chrome/Safari的使用比率已经越来越高了，应该考虑对非IE的浏览器进行多多测试了。

本文原创，放弃版权，欢迎转载。