强制换行与强制不换行

载自：http://www.hicss.net/solve-change-line-in-css/

强制换行与强制不换行用到的属性：

一般控制换行所用到的CSS属性一共有三个：word-wrap   word-break white-space   这三个属性可以说是专为了文字断行而创造出来的。

word-wrap语法：

各个浏览器均能识别

word-wrap:normal(默认)|break-word

         /* <span style="font-family: Arial, Helvetica, sans-serif;">normal</span><span style="font-family: Arial, Helvetica, sans-serif;"> ： 允许内容顶开指定的容器边界*/</span><span style="font-family: Arial, Helvetica, sans-serif;"> </span>

<span style="font-family: Arial, Helvetica, sans-serif;">                  /*  break-word : 内容将在边界内换行。必要时会触发 word-bread  </span><span style="font-family: Arial, Helvetica, sans-serif;">(</span><span style="font-family: Arial, Helvetica, sans-serif;">word-break、 break-word 是不同的东西，一为属性，另为参数</span><span style="font-family: Arial, Helvetica, sans-serif;">)  */
</span>

说明： 

word-wrap 是控制是否“为词断行”的，设置或检索当前行超过指定容器的边界时是否断开转行。中文没有问题，英文语句没有问题。但对于长串的英文，就不起作用

范例：

 congratulation这个单词属于长串英文，word-wrap:break-word整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断，这就是对于长串文字不起作用的解释。word-wrap:normal是默认情况，英文单词不被拆开。
结论：

作用范围仅为div这类标准块级元素，th,td这类table元素虽然识别但是没有效果（如果为td,th加上宽度word-wrap在IE下是能够发挥效果的，但根据完全兼容性方便记忆角度上来说还是以前面的结论为准）。

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（conguatulation）的后端部分了。
word-break:keep-all，是指Chinese, Japanese, and Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。（英文语句正常。）

结论：

作用范围仅为div这类标准块级元素，th,td这类table元素虽然识别但是没有效果（经测试Chrome下word-break:break-all是有效果的，但根据完全兼容性方便记忆角度上来说还是以前面的结论为准）。Firefox,Opera是无法识别word-break的，更不用提Firefox下的th,td中使用word-break的效果了。

white-space语法：

white-space：normal（默认）| pre | nowrap

normal: 默认 恐怖会被浏览器忽略

pre:恐怖会被浏览器保留。其行为方式类似HTML中的pre标签

nowrap:文本不会换行，文本会在同一行上继续，直到遇到br标签为止。

说明：

对于pre属性，其实就是HTML中连续的多个空白符会被合并，然后为了不让他合并 且让其中的空白符继续保留而不需要我们增加额外的样式和标签来控制它的缩进和换行。pre标签的原理也是一样的内部默认有了个white-space:pre.

对于nowrap属性，这个是强制不换行核心，一般强制不换行就是利用这个属性。Firefox的div和td中，以及ID的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;即可。