长英文、数字字符的自行换行是一个老生常谈的话题了,不过对这一问题一直没有总结,每次遇到都得找度娘,借今天的机会我还是做了一下总结。

对于自动换行的情况分两种:一种是块级元素中的长英文字符,另一种是table中的长英文字符。

一、在div、p等块级元素中

对于自行换行的处理,不同浏览器的处理方式是不同的。在ie6、ie7、ie8、ie9、chrome、safari中,只需在块级元素的样式中加入:word-break:break-all 就可以实现自行换行。但word-break:break-all在firefox和opera中失效,因此,对于这两个浏览器需采用另一种方式,即在块级元素的样式中加入:word-wrap:break-word。因此,要兼容不同浏览器,只需加入前面所说的两个样式就行。

具体css样式如下:

div{
word-break:break-all;/*适用于ie6、ie7、ie8、ie9、chrome、safari*/
word-wrap:break-word;/*适用于firefox和opera*/
}

二、在table中

在table中同样也要针对不同浏览器进行处理,在ie6、ie7、ie8、ie9、chrome、safari中,需在table的样式中加入:table-layout:fixed,这个主要是用来固定表格宽度,防止被撑开;同时在th、td的样式中加入:word-break:break-all;这样就可以实现自动换行。同样word-break:break-all在firefox和opera中会失效,因此,针对这两个浏览器th、td中的样式应该写成:word-wrap:break-word。因此要兼容不同浏览器,就得把前面所说的几个样式加起来。

具体css样式如下:

1
2
3
4
5
<pre class="brush:css">table{table-layout:fixed;/*固定表格宽度,防止被撑开*/}
th,td{
word-break:break-all;/*适用于ie6、ie7、ie8、ie9、chrome、safari*/
word-wrap:break-word;/*适用于firefox和opera*/
}</pre>

在firefox和opera中的处理方式并不完美,当相邻的长英文、数字字符串或者中文字符串在一行中所留下的空间不够长英文、数字字符串放置的时候,长英文、数字字符串就会先换行,然后自身再根据容器的宽度进行拆分换行。如下图所示。

自动换行图示说明