点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！
还记得的话，上一篇总结了一下浏览器对空格符的默认处理方式，其中说到可以用pre标签来原型输出空格内容。加标签总是让人觉得不是那么方便，同时也不可控，今天给大家理一下强大的CSS是如何控制空格的。
white-space这个属性就是用来处理空格的，主要有五个取值(normal，nowrap，pre，pre-wrap，pre-line)。要知道它们是如何控制文本的，通过demo演示，我来详细说一下。
【white-space：normal】
右边的文本前部有两个空格，三个hello合并成一个长单词，还有一个换行符。
所以，通过左边效果可以看出默认是：
文首的空格被忽略。由于容器太窄，第一个单词溢出容器，然后在可换行符（后面一个空格）处换行。文本内部的换行符自动转成了空格。
【white-space：nowrap】
white-space属性为nowrap时，与normal区别是不会因为超出容器宽度而发生换行
【white-space：pre】
和上一篇说的pre标签效果一样：
展示结果原始文本完全一致，所有空格和换行符都保留了
【white-space：pre-wrap】
从语义上也可以得出结论：
同样按照
标签的方式处理，和pre取值唯一区别是超出容器宽度时，会发生换行
【white-space：pre-line】
从上面效果可以看出，换行符没有转成空格，所以它的控制规则是：
保留换行符，其他都与normal的处理规则一致
总结一下：
关于继上一篇关于浏览对空格的默认处理，区别于用标签的方式来处理空格，今理了一遍white-space的一些重要的取值用法，下一篇我准备来写一下white-space在实际需求中的作用有哪些。有兴趣关注一下
分享到:
閱讀更多 小鄭搞碼事 的文章
