关于文本断行的样式

突然间发觉自己一直以来都是用以前的思维方式在写页面,很多细节的东西并未注意到。前几天组内有同学问我关于单字节的长字符截断问题,原以为很简单的只要用word-break:break-all;word-wrap:break-word;就能解决所有问题了。事实上这个的确能让长字符的单字节文本在块元素中被截断。

虽然是被截断了,但细节的问题还是存在,比如一个单词不希望被截断的时候也被截断了,这样就悲催了。如图:

正常来说,一个英文单词再怎么样也不太可能会非常非常的长,一般都是测试人员在做页面测试的时候,使用了很长很长的单字节连续的字符,才会出现这样的问题。那么如果这个时候把word-break:break-all;换成word-break:keep-all;的话,情况又会改变了,如图:

单词能正常显示,而很长的长字符就会被强制换行了。上面两张截图是来自 Chrome 20.0.1132.57 m 版本的浏览器,如果在FF和IE中查看的话,IE这神奇的宝贝又出现了一个情况,中文字符中,以标点符号为基准来强制换行,如果没有标点符号的话,那么又一切正常,如图:

这个时候我已经开始迷惑了,到底应该是用哪个好呢?正常来说我们肯定是希望单词能正常换行而不是强制被断行,如果是这样的话,我们就应该是使用word-break:keep-all;word-wrap:break-word;的组合,但这样的话,IE浏览器的换行实在是太过于可怕了,纠结啊。

思前想后,这个还是以文本能正常被截断,还是放弃IE这个鸟玩意,断行就用word-wrap:break-word;这样一个算了吧,使用word-wrap:break-word;这个的话,各个浏览器都支持强制换行,如果遇到空格或者标点符号也会换行,一切都是那么滴完美。 (^。^)y-~~

结合http://lab.linxz.de/word_break.html这个工具来使用的。

转自:小志博客   原文:在word-wrap和word-break之间的纠结关于文本断行的样式

posted @ 2012-07-27 09:22  前端小尚  阅读(476)  评论(0编辑  收藏  举报