CSS white-space 空白显示方式

Question

对于 white-space 属性，经常记不清楚那几个属性，然后有什么微妙的差别，所以就有了这篇文章。

white-space

通常用于处理元素的空白，包含空格（Space）、回车（Enter）、制表符（Tab）。

在默认情况下，无论我们有 N 多个空格或者回车，它显示在页面上都会合并成一个。超过一行的情况下，文字会换行。

但无奈的是，我们真实需求可能是要求各式各样的，所以默认情况显然是不满足我们所有要求的。

属性值

normal（默认）
所有空格、回车、制表符都合并成一个空格，文本自动换行。

nowrap
所有空格、回车、制表符都合并成一个空格，文本不换行。

pre
所有东西原样输出，文本不换行。

pre-wrap
所有东西原样输出，文本换行。

pre-line
所有空格、制表符合并成一个空格，回车不变，文本换行。

inherit
继承父元素（IE 不支持）