white-space

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

CSS 的 white-space 属性控制如何处理应用于它的元素上的文本。假设您拥有如下所示的 HTML 代码

<div>
  A bunch of words you see.
</div>

您已将 div 的样式设置为宽度为 100px。在合理的字体大小下,这对于文本来说太长了,无法容纳在 100px 内。在不进行任何操作的情况下,默认的 white-space 值为 normal,文本将自动换行。请参见下面的示例,或在本地使用 演示 进行操作。

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

如果要阻止文本换行,可以应用 white-space: nowrap;

请注意,在本文顶部的 HTML 代码示例中,实际上有两个换行符,一个在文本行之前,一个在文本行之后,这使得文本能够独立成行(在代码中)。当文本在浏览器中呈现时,这些换行符看起来像是被删除了。此外,第一字母之前的额外空格也被删除了。如果我们想强制浏览器显示这些换行符和额外的空白字符,我们可以使用 white-space: pre;

它被称为 pre,因为其行为就像您将文本包装在 <pre></pre> 标记中一样(默认情况下,这些标记以这种方式处理空白和换行符)。空白字符将完全按照 HTML 中的格式保留,并且文本不会换行,直到代码中出现换行符为止。这在字面显示代码时特别有用,因为代码在美学上受益于某些格式(有时也绝对至关重要,例如在依赖于空白的语言中!)

也许您喜欢 pre 如何保留空白和换行符,但您需要文本换行,而不是可能超出其父容器。这就是 white-space: pre-wrap; 的用途。

最后,white-space: pre-line; 将在代码中换行的位置换行,但额外的空白字符仍会被删除。

有趣的是,最后的换行符不会被保留。根据 CSS 2.1 规范:“行在保留的换行符处换行,并在必要时填充行框。” 因此,这也许说得通。

这是一个表格,用于了解所有不同值的属性行为

 换行符空格和制表符文本换行
normal折叠折叠换行
pre保留保留不换行
nowrap折叠折叠不换行
pre-wrap保留保留换行
pre-line保留折叠换行

在 CSS3 中white-space 属性将完全按照该图表进行操作,并将属性映射到 text-space-collapsetext-wrap

更多信息

浏览器支持

IEEdgeFirefoxChromeSafariOpera
8+全部全部全部全部全部
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera Mobile
全部全部全部全部全部
来源:caniuse