CSS让英文单词的自动换行

原文：http://blog.sina.com.cn/s/blog_9e5db79e0100yr8w.html

 
CSS让英文单词的自动换行

在制做网页过程当中，css样式编写中，可能会遇到文字换行的问题，其中英文换行可能会困扰着不少初学者，而今天我就这个问题进行相应的阐述，学过css的朋友应该都知道，控制文字是否换行能够直接使用css中的word-break来进行调整，可是对于英文来讲，咱们要让其能知足全部浏览器的须要，仅仅这一个属性是不够的。
根据我我的所了解的一些资料显示，英文过多，过长，不单单影响到表格，还影响到了div，有可能会撑破表格和div，对于表格和div的解决方法各有不一样，首先咱们来看在表格中改如何解决这个问题。
若是你使用的是表格布局，表格内的内容多以英文为主，并且英文不会换行，那么你只须要在css中加入以下代码便可
table {  
    table-layout: fixed;  word-break:break-all;  
    word-wrap:break-word;  
}  

若是你使用的div+css布局，那么遇到div中的文字被英文撑破时，能够在css中加入以下代码
div{  
    word-break:break-all;  
    word-wrap:break-word;  
}


根据 CSS2中文手册
word-break版本：IE5+专有属性　继承性：有
语法：
word-break : normal | break-all | keep-all
取值：
normal:默认值,容许在词间换行
break-all:该行为与亚洲语言的normal相同。也容许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all:与全部非亚洲语言的 normal 相同。对于中文，韩文，日文，不容许字断开。适合包含少许亚洲文本的非亚洲文本

说明：
设置或检索对象内文本的字内换行行为。尤为在出现多种语言时。
对于中文，应该使用 break-all 。
此属性对于 currentStyle 对象而言是只读的。对于其余对象而言是可读写的。
对应的脚本特性为 wordBreak 。
示例：
div {word-break : break-all; }
应用于：
IE5.0+
word-wrap版本：IE5.5+专有属性　继承性：有
语法：
word-wrap : normal | break-word
取值：
normal :　默认值。容许内容顶开指定的容器边界
break-word :　内容将在边界内换行。若是须要，词内换行( word-break )也将发生

说明：
设置或检索当当前行超过指定容器的边界时是否断开转行。
此属性仅做用于有布局的对象，如块对象。内联要素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute ，或者设定 display 属性为 block 。
此属性对于 currentStyle 对象而言是只读的。对于其余对象而言是可读写的。
对应的脚本特性为 wordWrap 。
示例：
div { word-wrap: break-word; word-break: break-all; }

注意这个
break-word :　内容将在边界内换行。若是须要，词内换行( word-break )也将发生
因此 word-wrap够用了，默认会不拆开单词换行，可是若是真有一个很是长的单词，好比上次某发错了版的史上最恐怖的12个英文单词，它也是会拆行的，这样避免了表格被撑坏。
不过这个没有被w3c做为css2的标准，因此Mozilla 不支持这个属性，若是你们都好好写英文单词就没事情，Firefox也是不拆开单词换行的，若是碰到有人写很长的单词，Mozilla Firefox就不会换行一直撑破了。