彻底搞懂word-break与word-wrap与white-space
white-space
作用： 定义空白的处理方式
| 是否生效 | 换行符(\r\n) | 空格 | 自动换行 | </br>、nbsp; | 使用时机 |
|---|---|---|---|---|---|
| normal | X | X（合并） | √ | √ | 无需换行符时推荐 |
| nowrap | X | X（合并） | X | √ | 仅单行显示时推荐 |
| pre | √ | √ | X | √ | X |
| pre-wrap | √ | √ | √ | √ | 推荐 |
| pre-line | √ | X（合并） | √ | √ | 推荐 |
word-break
作用: 定义单词换行的处理方式, 但无法控制超长单词的换行，超长单词换行由 word-wrap 这个 css 属性指定
| 单词换行方式 | 说明 |
|---|---|
| normal | 使用默认的断行规则 |
| break-all | 对于 non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。 |
| keep-all | CJK 文本不断行。Non-CJK 文本表现同 normal。 |
| break-word | 存在兼容问题，不推荐使用 |
word-wrap（overflow-wrap）
word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本现在也支持这种新语法。
这个属性也是控制单词如何被拆分换行的，实际上是作为 word-break 的互补，它只有两个值：normal | break-word，那我们看下 break-word
| 超长单词换行方式 | 说明 |
|---|---|
| normal | 不换行 |
| break-word | 强制换行 |