转 CSS空格处理

HTML 代码的空格通常会被浏览器忽略。通常文字的前部和后部的空格都会忽略，内部的连续空格只会算作一个。这就是浏览器处理空格的基本规则。如果希望空格原样输出，可以使用

标签。

说明：pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

 标签的一个常见应用就是用来表示计算机的源代码。

HTML 处理空格的规则，适用于多种字符。除了普通的空格键，还包括制表符（\t）和换行符（\r和\n）。

浏览器会自动把这些符号转成普通的空格键。

CSS 的 white-space 属性

HTML 语言的空格处理，基本上就是直接过滤。这样的处理过于粗糙，完全忽视了原始文本内部的空格可能是有意义的。

CSS 提供了一个white-space属性，可以提供更精确一点的空格处理方式。该属性共有六个值，除了一个通用的inherit（继承父元素），下面依次介绍剩下的五个值。

1.white-space: normal

white-space属性的默认值为normal，表示浏览器以正常方式处理空格。

例如：文字前部后补的空格被忽略，内部连续的多个字符会算作一个，文字内部换行符被当做空格，如果出现移出容器的情况，单词不会换行，单词后的空格会被处理成换行…

2.white-space: nowrap

nowrap:不换行，不会因为超出容器宽度而发生换行。

3.white-space: pre

就按照

标签的方式处理。显示的结果与原始文本完全一致，所有空格和换行符都保留了。

4.white-space: pre-wrap

基本还是按照

标签的方式处理，唯一区别是超出容器宽度时，会发生换行。

5.white-space: pre-line

意为保留换行符。除了换行符会原样输出，其他都与white-space:normal规则一致。

除了文本内部的换行符没有转成空格，其他都与normal的处理规则一致。这对于诗歌类型的文本很有用。