细说文本属性wordwrap、whitespace、wordbreak

　　本篇随笔主要介绍3个比较相近的文本属性word-wrap、white-space、word-break，先看看官方API对这3个属性的介绍——

word-wrap : normal | break-word 
normal    : 默认值。允许内容顶开指定的容器边界
break-word: 内容将在边界内换行。如果需要，词内换行( word-break )也将发生 

white-space :   normal | pre | nowrap 
normal  　　 :　 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行 
pre    　　  :　 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。
　　　　　　　　　 如果 !DOCTYPE 声明没有指定为 standards-compliant mode ，此属性可以使用，但是不会发生作用。结果等同于 normal 。
nowrap  　　 :　 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。

word-break : normal | break-all | keep-all 
normal     : 默认值。允许在词间换行 
break-all  : 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本 
keep-all   : 与所有非亚洲语言的 normal 相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本

　　经试验，总结表格如下（略去pre）：

word-wrap	white-space	word-break	效果	备注
normal（默认）	normal（默认）	normal（默认）	词间换行，词内不换行	所有浏览器显示效果相同
break-word	normal（默认）	normal（默认）	词间换行，词内换行	所有浏览器显示效果相同
normal（默认）	nowrap	normal（默认）	词间不换行，词内不换行	所有浏览器显示效果相同
normal（默认）	normal（默认）	break-all	词间不换行，词内不换行	FF/Opera不同：不支持word-break属性
normal（默认）	nowrap	break-all	词间不换行，词内不换行	所有浏览器显示效果相同
break-word	nowrap	normal（默认）	词间不换行，词内不换行	所有浏览器显示效果相同
break-word	normal（默认）	break-all	词间不换行，词内换行	FF/Opera不同：不支持word-break属性
break-word	nowrap	break-all	词间不换行，词内不换行	所有浏览器显示效果相同

　　由此可以得出，white-space:nowrap;的设置优先级是最高的，即：在存在white-space:nowrap;的情况下，无论word-wrap和word-break属性设置为何值，显示效果均相同——强制内容在同一行显示，词间不换行，词内不换行。

　　还有两个常用的文本属性，如完成文本超出本分以"…"形式输出。则可用（所有浏览器显示均同）：

　　overflow:hidden;
　　text-overflow:ellipsis;

　　倘若强制文本同一样显示，并且文本超出部分以“…”形式输出，则只需添加white-space:nowrap;即可。

　　倘若文本多行显示，并且文本超出部分以“…”形式输出，选择应用JavaScript进行控制是一个万全之策。