自转： http://chenfeng Ming.cn/front-end/CSS-Qiang-zhi-he-Qiang-zhi-bu-Huan-xing-html
中文的情况
在div、p、ul、li (等块级元素)布局中设置特定的width时，会自动换行。
在span，a (同位素)上设置了display :内嵌块或display :块； 也可以自动换行了。
(div布局) ) span布局display :在线块； ）
包含英语的话不会自动换行，溢出
(div布局) ) span布局display :在线块； ）
强制换行
用于控制换行符的CSS属性有三个： word-wrap。 word-break white-space；
word-wrap语法：各浏览器均可识别
网络结论
魔兽世界：正规| break-word；
参数：
normal :允许内容刺穿指定的容器边界。
break-word:的内容在边界内换行，根据需要触发word-break。 (请明确word-break和break-word这两个是不同的，一个是属性，另一个是参数。 ) )；
说明：
word-wrap控制是否为“单词换行”，并设置或搜索当前行超过指定容器时是否中断跳槽。 中文没有任何问题，语句也没有问题，但在长英语中不起作用。
例如：
单词congratulation是一个长字符串英语单词，word-wrap:break-word将整个单词视为一个单词，如果该行的边缘宽度不足以显示整个单词，它会自动将整个单词放在下一行，并且不会截断单词这就是对长字符串不起作用的说明。 word-wrap:normal是默认情况下不分解英语单词。
结论：
作用范围虽然只有div这样的标准块水平的元素、th、td这样的table元素，但是虽然被识别但是没有效果。 (在td的情况下，如果在th中加入宽度word-wrap的话，虽然在IE中可以发挥效果，但是从完全互换性、容易记忆性的观点来看，以上述结论为准)。
自己的结论【ie7，8，9 firfox，Google】
问题：
包含英语的话会自动换行。 (word-wrap :加入break-word； ）
(div布局) ) span布局显示： inline-block； ）
word-break语法：
参数
无法识别word-break : normal|||break-all|| keep-all Firefox，Opera
根据亚洲和非亚洲语言的文本规则，normal:允许在单词中换行。
break-all:此行为与亚洲语言normal相同。 也允许在非亚洲语言文本行中的任何单词内进行分隔符。 此值适用于包含非亚洲文本的亚洲文本。
keep-all:与所有非亚洲语言的normal相同。 对于中文、韩语、日语，不允许断字。 适用于包含少量亚洲文本的非亚洲文本。
word-break:break-all是断开的单词。 当单词到达边界时，下一个字符自动变为下一行。 主要解决了长字符串的英语问题。 (正好弥补了上面word-wrap:break-word对长字符串不起作用的缺点。)。
例如：
接着上面的congratulation这个单词是一长串英语，word-break:break-all它把单词截断，该行的末端像conra(congratulation的前端部分)，下一个行为是tulation
word-break:keep-all是指Chinese、Japanese、and Korean。 只有这个时候，如果不使用word-wrap的话，中文是不会换行的。 英语文章正常。 ）
(IE下) )火狐下) )。
结论：
作用范围只有div这样的标准块级元素、th、td这样的table元素，但可以识别但没有效果。 (在接受测试的Chrome中，word-break:break-all效果良好，但从完全兼容性和易记忆性的角度来看，以上述结论为准)。 Firefox，Opera无法识别全写。 在Firefox的th、td中没有必要提到word-break的效果。
自己的结论：火狐下该属性不兼容，兼容IE、谷歌浏览器
white-space语法：
空间：正常(默认)
参数：
正规
: 默认。空白会被浏览器忽略。pre: 空白会被浏览器保留。其行为方式类似HTML中的pre标签。
nowrap: 文本不会换行，文本会在在同一行上继续，直到遇到br标签为止。
说明：
对于pre属性，其实就是HTML中连续的多个空白符会被合并，然后为了不让他合并（最常用的场合就是表示代码文字缩进）让其中的空白符继续保留而不需要我们增加额外的样式和标签来控制它的缩进和换行。pre标签的原理也是一样的内部默认有了个white-space:pre。
对于nowrap属性，这个是强制不换行核心，一般强制不换行就是利用这个属性。Firefox的div和td中，以及IE的div中，均没有问题。唯一的瑕疵就是在IE的td中会有一个问题，如果td没有指定宽度，则nowrap仍然有效，如果td有宽度，并且文字中无标点、无空格（例如中文长串文字），nowrap则不再有效。解决方式就是可以加word-break:keep-all;可以解决此问题。
结论：
如果在div这类标准块级元素中需要强制换行，最普遍的方案那就是word-wrap:break-word; word-break:break-all;此方式的缺点就是会导致如果恰巧该行末端宽为一个长串英文单词，那么该单词会被撕开的尴尬样式(而且FF不识别word-break，反而不会撕开这个单词)。个人认为如果你这个div里面放的类似于URL这个长串地址，那么用此方案是非常不错的选择（注意：由于FF不识别word-break，所以无法保证每行末端会整齐的断开URL单词，但这也是无奈的选择）。如果不是放置URL这类可以断开的长串英文，而是英文句子的话，那么使用word-wrap:break-word;即可。至于网上看到有word-wrap:break-word; overflow:hidden;这么个写法，据说可以兼容IE和FF，但经过亲自测试似乎没有什么特别效果。当然，如果你有更好的方案也可以留言参与讨论，这里也十分欢迎您的意见。
基本上设定完这个属性后基本的换行问题都能够解决而不会出现table中td,th因为里面各个内容的多寡发生抢夺其他td,th宽度的情形发生。这时如果你依旧有强制换行问题，那么在此td中内部加一层div，那么情况就会像上面讨论的方式来解决。
强制不换行的问题到是比较容易分析的，就如上面所讨论的那样使用white-space:nowrap，Firefox的div和td中，以及IE的div中，均没有问题。唯一的瑕疵就是在IE的td中会有一个问题，如果td没有指定宽度，则nowrap仍然有效，如果td有宽度，并且文字中无标点、无空格（例如中文长串文字），nowrap则不再有效。解决方式就是可以加word-break:keep-all;可以解决此问题。综合下来，比较稳妥的方式是在文字与td之间再套一层div，然后使用nowrap，那么就是强制不换行。注意这时候很有可能文字会过多导致溢出容器，所以你还得加一个overflow:hidden，防止溢出容器，这样子就可以兼容各个浏览器了
强制不换行，多余的部分用省略overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
摘自：http://www.hicss.net/solve-change-line-in-css/#comment-798