CSS white-space 使用技巧
November 25th, 2010
36 条评论
HTML 中的“空白符”包括空格 (space)、制表符 (tab)、换行符 (CR/LF) 三种。在默认情况下，HTML 源码中的空白符均被显示为空格，并且连续的多个空白符会被合并为一个。
有些时候，我们希望 HTML 源码中的多个连续空格在网页浏览器中可以真实地呈现，或者需要源码中的换行符能起到真正的换行作用。于是，我们发现了 <pre> 标签，它可以真实还原它内部文本的空白符的真实情况。
随着对 CSS 的了解不断深入，我们发现，原来这一切都是 white-space 属性在安排。<pre> 元素之所以如此神奇，是因为它自身具有 {white-space: pre;} 这一默认样式。
下表列出了white-space 这一CSS属性可能取的值：
white-space 属性值一览表
| 属性值 | 空白符 | 换行符 | 自动换行 | 最早出现于 |
|---|---|---|---|---|
normal | 合并 | 忽略 | 允许 | CSS 1 |
nowrap | 合并 | 忽略 | 不允许 | CSS 1 |
pre | 保留 | 保留 | 不允许 | CSS 1 |
pre-wrap | 保留 | 保留 | 允许 | CSS 2.1 |
pre-line | 合并 | 保留 | 允许 | CSS 2.1 |
inherit | 继承父元素 | 继承父元素 | 继承父元素 |
最新评论