测试代码：
下面是本文中用于测试三个样式属性展现情况的html代码：
<div id="box"> Hi , This is a incomprehensibilities long word. </br> 你好 ， 这 是一个不可思议的长单词 </div>
现在只给了它一个宽度和边框，没有其它任何样式，下面是它目前的展现情况：
可以看到， 和 </br> 可以正常发挥作用，而连续的空格会被缩减成一个（比如This和is之间的三个空格变成了一个），换行符也全都无效。句子超过一行后会自动换行，而长度超过一行的单个单词会超出边界。
接下来我们看下， 给它上面三个css属性赋值后会出现什么变化。
white-space 属性
white-space 属性指定元素内的空白怎样处理。
| 值 | 描述 |
|---|---|
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
为了方便比较，下文所有图，左侧为 normal 即初始情况，右侧为赋上相应值时的情况：
white-space:nowrap
不仅空格被合并，换行符无效，连原本的自动换行都没了！只有 </br> 才能导致换行！所以这个值的表现还是挺简单的，我们可以理解为永不换行。
white-space:pre
空格和换行符全都被保留了下来！不过自动换行还是没了。保留，所以 pre 其实是 preserve 的缩写，这样就好记了。
white-space:pre-wrap
显然 pre-wrap 就是 preserve+wrap，保留空格和换行符，且可以自动换行。
white-space:pre-line
空格被合并了，但是换行符可以发挥作用，line 应该是 new line 的意思，自动换行还在，所以 pre-line 其实是 preserve + new line+wrap。
总结：
| 属性 | 换行符 | 空格 | 自动换行 | </br>、nbsp; |
|---|---|---|---|---|
| normal | × | ×（合并） | √ | √ |
| nowrap | × | ×（合并） | × | √ |
| pre | √ | √ | × | √ |
| pre-wrap | √ | √ | √ | √ |
| pre-line | √ | ×（合并） | √ | √ |
word-break
word-break属性指定非CJK脚本的断行规则。
提示:CJK脚本是中国，日本和韩国（"中日韩"）脚本。
语法
word-break: normal | break-all | keep-all;
| 值 | 描述 |
|---|---|
| normal | 使用浏览器默认的换行规则。 |
| break-all | 允许在单词内换行。 |
| keep-all | 只能在半角空格或连字符处换行。 |
word-break:keep-all
所有“单词”一律不拆分换行，注意，我这里的“单词”包括连续的中文字符（还有日文、韩文等），或者可以理解为只有空格可以触发自动换行
word-break:break-all
所有单词碰到边界一律拆分换行，不管你是incomprehensibilities这样一行都显示不下的单词，还是long这样很短的单词，只要碰到边界，都会被强制拆分换行。
word-wrap（overflow-wrap）
word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。
这个属性也是控制单词如何被拆分换行的，实际上是作为word-break的互补，它只有两个值：normal | break-word，那我们看下break-word：
语法
word-wrap: normal | break-word;
| 值 | 描述 |
|---|---|
| normal | 只在允许的断字点换行（浏览器保持默认处理）。 |
| break-word | 在长单词或 URL 地址内部进行换行。 |
word-wrap:break-all
只有当一个单词一整行都显示不下时，才会拆分换行该单词。
总结：
最后总结一下三个属性
- white-space，控制空白字符的显示，同时还能控制是否自动换行。它有五个值：normal | nowrap | pre | pre-wrap | pre-line
- word-break，控制单词如何被拆分换行。它有三个值：normal | break-all | keep-all
- word-wrap（overflow-wrap）控制长度超过一行的单词是否被拆分换行，是word-break的补充，它有两个值：normal | break-word
span 文本内容换行完整样式
<span style=" width:200px; display:inline-block; word-break:break-all; word-wrap: break-word; white-space:normal"> </span>
因为 span 不是块状元素，本身自带有 左浮动的效果，并且连续的英文字母跟数字是没办法自动换行的必须要强制换行。但是光用word-wrap:break-word; 是不行的。必须要在限制了宽度的情况下还要增加 white-space:normal 属性
