长英文、数字字符的自行换行

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

对于自动换行的情况分两种：一种是块级元素中的长英文字符，另一种是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样式如下：

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

自动换行图示说明