2018年08月03日阅读 412095

这样理解white-space属性的取值，你会不知不觉的记住了所有

前言

white-space这个属性就是用来处理空格的，主要有五个取值(normal，nowrap，pre，pre-wrap，pre-line)。要知道它们是如何控制文本的，通过demo演示，我来详细说一下。

white-space：normal
右边的文本前部有两个空格，三个hello合并成一个长单词，还有一个换行符。

所以，通过效果可以看出默认是：

文首的空格被忽略。由于容器太窄，第一个单词溢出容器，然后在可换行符（后面一个空格）处换行。文本内部的换行符自动转成了空格。

white-space属性为nowrap时，与normal区别是不会因为超出容器宽度而发生换行

和上一篇说的pre标签效果一样：

展示结果原始文本完全一致，所有空格和换行符都保留了

从语义上也可以得出结论：

同样按照<pre>标签的方式处理，和pre取值唯一区别是超出容器宽度时，会发生换行

从上面效果可以看出，换行符没有转成空格，所以它的控制规则是：

保留换行符，其他都与normal的处理规则一致