zeuux-universe  - 讨论区

标题:[zeuux-universe] 关于CSS属性word-break

2008年11月05日 星期三 20:26

Yongwei Wu wuyongwei在gmail.com
星期三 十一月 5 20:26:31 CST 2008

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

CSS3草案
http://www.w3.org/TR/css3-text/#word-break>

支持五个属性值:normal,keep-all,loose,break-strict,和break-all。其
中对break-all声明使用"松散"的规则处理CJK文字(中文,日文,韩文)。
break-strict才使用标准的CJK文字断行规则,就像IE里的break-all。详见上面
的URL。

Internet Explorer
http://msdn.microsoft.com/en-us/library/ms531184(VS.85).aspx>

支持两个属性值:break-all和keep-all。break-all相当于CSS3草案中的
break-strict(而非break-all),对非CJK文字的断行产生影响。

Firefox

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

Safari/WebKit
http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html>

支持三个属性值: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的
浏览器进行多多测试了。

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

-- 
Wu Yongwei
URL: http://wyw.dcweb.cn/

[导入自Mailman归档:http://www.zeuux.org/pipermail/zeuux-universe]

2008年11月05日 星期三 20:48

Yongwei Wu wuyongwei在gmail.com
星期三 十一月 5 20:48:17 CST 2008

补充一句,这些讨论的前提是有可能出现(用户输入的)无空格长ASCII序列需
要进行中间断行。如果没有这些情况的话(或概率极低),最好的方法是不使用
任何CSS属性,让浏览器自动断行。如果实在需要,建议不要对网站的正文使用
这些属性,而只对用户反馈应用这些特殊的CSS属性,以尽量避免排版上的副作
用。

2008/11/5 Yongwei Wu <wuyongwei在gmail.com>:
> 最近发现word-break:break-all有被滥用的趋势。新浪和无数的BBS都在用这个
> CSS3的属性。目的当然很清楚:允许在很长的英文字母序列之中断行,而不至于
> 造成行长引致的横向滚动条。但是这带来了很多问题:主要浏览器对CSS3草案中
> 的word-break解释各不相同。
>
> CSS3草案
> http://www.w3.org/TR/css3-text/#word-break>
>
> 支持五个属性值:normal,keep-all,loose,break-strict,和break-all。其
> 中对break-all声明使用"松散"的规则处理CJK文字(中文,日文,韩文)。
> break-strict才使用标准的CJK文字断行规则,就像IE里的break-all。详见上面
> 的URL。
>
> Internet Explorer
> http://msdn.microsoft.com/en-us/library/ms531184(VS.85).aspx>
>
> 支持两个属性值:break-all和keep-all。break-all相当于CSS3草案中的
> break-strict(而非break-all),对非CJK文字的断行产生影响。
>
> Firefox
>
> 搜索结果表明Firefox不支持word-break。
>
> Safari/WebKit
> http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html>
>
> 支持三个属性值: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的
> 浏览器进行多多测试了。
>
> 本文原创,放弃版权,欢迎转载。

-- 
Wu Yongwei
URL: http://wyw.dcweb.cn/

[导入自Mailman归档:http://www.zeuux.org/pipermail/zeuux-universe]

2008年11月06日 星期四 10:42

Zhang Weiwu zhangweiwu在realss.com
星期四 十一月 6 10:42:51 CST 2008

很有深度!我觉得你应该建一个blog^_^或者将文发到一个社群blog上去,这样影
响更广,易被链接到。

Yongwei Wu wrote:
> 最近发现word-break:break-all有被滥用的趋势。新浪和无数的BBS都在用这个
> CSS3的属性。目的当然很清楚:允许在很长的英文字母序列之中断行,而不至于
> 造成行长引致的横向滚动条。但是这带来了很多问题:主要浏览器对CSS3草案中
> 的word-break解释各不相同。
>
> CSS3草案
> http://www.w3.org/TR/css3-text/#word-break>
>
> 支持五个属性值:normal,keep-all,loose,break-strict,和break-all。其
> 中对break-all声明使用"松散"的规则处理CJK文字(中文,日文,韩文)。
> break-strict才使用标准的CJK文字断行规则,就像IE里的break-all。详见上面
> 的URL。
>
> Internet Explorer
> http://msdn.microsoft.com/en-us/library/ms531184(VS.85).aspx>
>
> 支持两个属性值:break-all和keep-all。break-all相当于CSS3草案中的
> break-strict(而非break-all),对非CJK文字的断行产生影响。
>
> Firefox
>
> 搜索结果表明Firefox不支持word-break。
>
> Safari/WebKit
> http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html>
>
> 支持三个属性值: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的
> 浏览器进行多多测试了。
>
> 本文原创,放弃版权,欢迎转载。
>
>   


-- 
Real Softservice

Huateng Tower, Unit 1788
Jia 302 3rd area of Jinsong, Chao Yang

Tel: +86 (10) 8773 0650 ext 603
Mobile: 159 1111 7382
http://www.realss.com


[导入自Mailman归档:http://www.zeuux.org/pipermail/zeuux-universe]

如下红色区域有误,请重新填写。

    你的回复:

    请 登录 后回复。还没有在Zeuux哲思注册吗?现在 注册 !

    Zeuux © 2024

    京ICP备05028076号