吴咏炜

吴咏炜的博客

他的个人主页  他的博客

关于CSS属性word-break

吴咏炜  2009年07月28日 星期二 21:17 | 4716次浏览 | 3条评论

最近发现word-break:break-all有被滥用的趋势。新浪和无数的BBS都在用这个CSS3的属性。但问题是,这个用法对中文的效果,按CSS3的解释,是不正确的。在非IE的浏览器中,即可常常见到这样的问题。在此对该问题作简要分析,并提供一种解决方案。

偷个懒,把以前写的东西发上来,占个位。写于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的浏览器进行多多测试了。

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

评论

我的评论:

发表评论

请 登录 后发表评论。还没有在Zeuux哲思注册吗?现在 注册 !
夏武

回复 夏武  2009年07月28日 星期二 22:49

很棒文章。刚才又看了一下W3C的介绍,属性的设计很有学问,不过很多都被我们一传十,十传百的滥用了。
为了在firefox下不出现滚动条,稍微改一下word-wrap:break-word; overflow:hidden;*overflow:auto;

0条回复

夏清然

回复 夏清然  2009年07月28日 星期二 22:29

CSS确实是很复杂的东东。

支持原创!

0条回复

徐继哲

回复 徐继哲  2009年07月28日 星期二 22:16

支持深度技术文章。在我们开发中碰到的关于换行的问题,最头疼的是一串超长的连续英文字母,这个不同浏览器的解释也不一样,导致有非常丑陋的结果,现在的解决办法是加入wbr标签。

web开发有大量的细节,加之浏览器兼容性问题,简直是个巨大的泥潭。。。。

0条回复

暂时没有评论

Zeuux © 2019

京ICP备05028076号