这是我参与「第四届青训营」笔记创作活动的第一天

CSS 空白处理

<div class="box"> 11 22 33 44
    55 66
    77
 </div>

现有一段文本如上面所示，若不添加任何 CSS 处理，则在浏览器渲染出来为：

可见，对应的额外空格与换行符都在浏览器渲染时被忽略。

这篇文章主要介绍在不使用   与 <br> 的情况下，如何利用 CSS 处理文本的空白与换行。

标签中有多个空格和换行问题

决定浏览器如何处理空白和换行符

属性值	作用	是否正常换行	是否合并连续空白符	换行符是否有效
normal	默认值，正常换行，空白和换行符会被浏览器忽略（多个连续空格只显示一个）	是	是	否
pre	不会自动换行，除非遇到换行符或者br标签（多个连续空白显示多个）	否	否	是
nowrap	不换行忽略换行符，直到遇到br标签为止	否	是	否
pre-wrap	正常换行连续的空白会被保留换行符有效	是	否	是
pre-line	正常换行连续空白符会被合并成一个换行符也有效	是	是	是

决定文本内容超出容器时，浏览器是否自动插入换行符

属性值	作用
normal	默认换行规则，连续字符不换行，直接溢出父元素
break-all	强制在父元素边缘位置截断（单词可能被从中间劈开），连续的标点符号不会换行
keep-all	与 normal 相同
* break-word	不是个规范属性（部分浏览器支持），效果同 word-wrap:break-word;

决定浏览器是否应该在一个无法正常断开的单词内部插入换行符

属性值	作用
normal	换行只发生在单词见的空格等地方（不会截断单词，过长的单词容易溢出父元素）
break-word	如果没有合适的截断点，可能在任意位置截断单词（先尝试正常换行，若换行后还是很长，就在任意位置截断【连续的标点符号也会截断】）