CSS文字换行始末

• 注：
  • 本文有钻牛角尖嫌疑，建议心理承受能力差者移步。
  • 本文可能不够全面，写出来就是让大家批评指正
  • 本文firefox指的是firefox 4，opera指opera 11，safari指safari5，chrome指chrome 9.0.597.107

昨天我在编辑某个网页的时候,某种原因长按了一个字母，结果发生下图这样的事情（内容已经被我重新修改过，但是原文还是跟它一样，有一长串英文，然后是中文，接着是一段规则的英文）。

对此在CSDN请教了高手，原来浏览器是把那一长串的英文当做了一个单词。

对此，我作了一个极端的测试，就是在一长串英文中间加入标点符号等（注意是半角的标点符号），显示如下图：

可以看到只有在?号和-号（半角）和空格的地方换行，其他符号均不断行。

对此，我是这么认为的：浏览器把?号、-号、空格之间的英文字符全部看做一个单词，所以不会自动换行。（下文还会对“单词进行讨论”）

为什么一个长单词不会自动被拆开换行呢？以下开始本文的主要内容：CSS文字换行。

先看两个关于文字换行的CSS属性：

• 1.word-wrap.它有两个属性值：
  • normal.默认情况，表示单词不自动换行
  • break-word.表示强制换行
• 2.word-break.它有三个属性值：
  • normal.默认情况
  • break-all.单词到边界时,下个字母自动到下一行
  • keep-all.表示单词不断

 

但看上面的解释不好理解，来点实际例子罢！

先看中文字符的情况。

中文字符一般不会出现问题，他们都会自动换行，但是只要注意IE6和IE7，当在这两个浏览器中设为word-wrap:nomal;word-break:keep-all时，不会断行，直接跟着原来那一行溢出到容器外面，见图1。下文对这个还会有所讨论。

英文就比中文复杂一些了。

先理解一下“单词”，前面（红色字体）已经提过，“单词”就是：?号、-号（别忘了都是半角的问号、减号）、空格之间的英文字符、标点符号的组合全部看做一个单词。例如huieuri.';fsijij就相当于一个单词，而husirheir?noijfdg相当于两个单词（中间的?是分隔）。

情况一：当设置为word-wrap:nomal;word-break:normal或者什么都不设置时，中文显示行尾的英文单词都不被拆开换行。我是这么理解的：文本是一个单词一个单词地“摆放”的，当某行摆放了一些单词之后，发现下一个单词在这行剩下的空间里面放不下了，那个这个单词就会被放到下一行去。如果下一行还放不下这个单词，也就是一个单词的长度比一行还要大（这个情况很极端的了），那么这个单词超出的内容就会沿着这行溢出到容器外面。见图2。

如图2，中间溢出的一行都相当于一个单词，它的上一行剩下的空间放不下它了，才把它放到这一行，但是这一行还放不下，它就只好原地溢出了。

当然，IE6是个非常诡异的家伙，容器会被溢出的内容撑大，见图3。

情况二：当设置为word-wrap:nomal;word-break:break-all或者前一个不设而后者设为break-all时。

在firefox、opera、IE8中，效果跟情况一一样。

而在webkit内核浏览器(chrome、safari)和IE6、IE7中，所有的单词都会在行尾自动断开。见图4。

情况三：当设置为word-wrap:normal(或不设);word-break:keep-all时。

大部分浏览器中，效果跟情况一一样，单词不被拆开。

但是IE6、IE7中，连中文也不换行了！也就是说，连续的中文居然被看成了一个单词！见图5(IE7效果)。而当遇到空格、逗号、顿号、双引号、单引号、{号、书名号的时候，它们又能换行了！如图6（IE6效果）。真不愧是厉害的浏览器，绝对的搞死人！

情况四：当设置成word-wrap:break-word;word-break:nomal(或后者不设置)时。

这时候大部分浏览器，效果跟情况一很像，不过情况一中的长英文串会溢出，而这里的长英文串会自动被拆开换行，IE6、IE7中的问题也再也不存在。如图7。

对此，我是这样理解的（这里要注意和上文蓝色字体的区别）：文本还是一个单词一个单词地“摆放”，当某行摆放了一些单词之后，发现下一个单词在这行剩下的空间里面放不下了，那个这个单词就会被放到下一行去。如果下一行还放不下这个单词，也就是一个单词的长度比一行还要大，那么这个单词超出的内容就会被放到下一行。图7中的红色区域相当于一个单词。

可是这时候居然IE8给你来个耍大牌了！居然长英文串还是不肯换行，直接在原地溢出，跟情况一一样！见图8中IE8的显示效果。

情况五：当设置为word-wrap:break-word;word-break:break-all时。

在opera、firefox中，效果跟情况四一样。

在IE6、IE7、chrome、safari中，效果跟情况二一样。所有的字符都会自动被拆开换行。

IE8中还是老样子，长字符没法换行。

情况六：当设置成word-wrap:break-word;word-break:keep-all时。

效果跟情况四一样

总结

• 两个属性的normal都不要设置，不设也相当于设了，而设了也等于没设。
• 注意“单词”的意思
• 设置只要设置了word-wrap:break-word，不设设置word-break的值，也不用担心会发生溢出。
• 如果设置了word-wrap:break-word后，如果你一定要设置word-break的值，一般情况它等于没设，只有在IE6、IE7、webkit中设为word-break:break-all时，短单词也会被拆开换行。
• IE8暂时没想到好的解决溢出的方法
• 实际情况中想自动换行的话，只要设置word-wrap:break-word就行了，不必再设置word-break，以免IE6、IE7、chrome、safari中出现短单词也被拆开的情况，再设置一个overflow:hidden，把IE8中没法解决的溢出部分隐藏起来（因为一个单词比一行还要长的现象不太可能发生，干脆隐藏超出的部分算了，下下策）。