White Space

空白（White Space）是 CSS（层叠样式表）中定义的一个属性，允许用户控制网站元素内的文本换行和空白。根据用户的需求，它可以取多种类型的值。

空白属性的语法

在 CSS 中实现 white-space 属性的语法与其他属性类似：property_name: value;

可以传递给 white-space 属性的几个值是

上面分配给属性的值是关键词值；它们是网站中特定元素特有的。

上面提到的值是全局的；它们用于保持所有网站元素之间的一致性。

white-space 属性是单一值，这意味着您一次只能使用一个值。

white-space 中不同值执行的功能

• normal: 此值会折叠一系列空白。换行符也被视为空白。如果行断开，则该行必须填满行框。
• nowrap: 使用此值，它将元素之间的空白视为正常，但它会抑制源中的换行符或文本换行。
• pre: 它不会折叠空白，空白会保留。行仅通过网站源中提到的换行符和 break 标签中断。
• pre-wrap: 空白序列会保留。它与 pre 类似，因为空白序列会保留。行要么在新行上断开，要么由于源代码中的 break 标签而断开。唯一的区别是它也需要填满行框。
• pre-line: 此值会折叠内容中的空白。行由于换行符或 break 标签而断开。必须填满行框。
• break-spaces: break-spaces 的行为与 pre-wrap 有些相似；两者之间的主要区别如下
• 任何保留的空白序列都将占用空间。这也包括行尾。
• 在 break-spaces 中，每个保留的空白字符后都存在换行机会。在空白字符之间也可能出现换行。
• 这些保留的空格会占用空间，但它们不会悬挂。这可能会改变框的固有尺寸。

实现 white-space 属性

Normal: 这是属性的默认值。它会在必要时执行文本换行。当 normal 值分配给 white-space 属性时，所有包含两个以上空格的序列都将被单个空白替换。

语法

下面是一个示例，说明使用 normal 作为值的 white-space 属性的实现。

输出

Nowrap: 当 white-space 属性被分配 nowrap 值时。所有包含两个以上空格的字符序列都将表示为单个空格。除非用户指定，否则它不会执行换行。

语法

下面是一个示例，说明使用 nowrap 作为值的 white-space 属性的实现。

输出

Pre: 此值对元素产生与 HTML 中定义的 pre 标签相同的效果。如果用户明确使用换行符指定，元素中的内容将换行。

语法

下面是一个示例，说明使用 pre 作为值的 white-space 属性的实现。

输出

Pre-line: 如果用户在 CSS 中将 pre-line 分配为 white-space 属性的值。元素中内容中所有两个或更多空白的序列都将被单个空白替换。用户可以换行元素中的内容，但用户必须明确指定换行。

语法

下面是一个示例，说明使用 pre-line 作为值的 white-space 属性的实现。

输出

Pre-wrap: 如果用户在 CSS 文档中将 pre-wrap 分配为 white-space 属性的值。这意味着所有空白序列都将以文档中的原样显示。然后，空白将不受影响。用户可以换行元素中的内容，但要这样做，用户必须明确指定。

语法

下面是一个示例，说明使用 pre-wrap 作为值的 white-space 属性的实现。

输出

Initial: 此值可以分配给 CSS 中的 white-space 属性，使其恢复为默认值。

语法

下面是一个示例，说明使用 initial 作为值的 white-space 属性的实现。

输出

Initial: 此值可以分配给 CSS 中的 white-space 属性，使其恢复为默认值。

语法

下面是一个示例，说明使用 initial 作为值的 white-space 属性的实现。

输出

支持 white-space 属性的浏览器

市场上有多种网络浏览器。以下浏览器支持上述 white-space 属性

• Google Chrome 1.0 及更高版本
• Microsoft Edge 12.0 及更高版本
• Firefox 1 及更高版本
• Internet Explorer 5.5 及更高版本
• Opera 4 及更高版本
• Safari 1 及更高版本
• 它还受到 Android 和网络应用程序版本的软件支持。