跳到主要内容位置

CSS 控制空白字符行为

在 HTML 源文件中编写文本的时候，即使我们手动在编辑器（例如 VS Code）中对文本换行，在浏览器中渲染时，文本也不会自动换行，除非超过容器的宽度；另外，文本中如果有多个空格，也会自动合并成一个，除非用   来强制渲染空格：

  <p>
    文字换行了，
      并且有多       个空格。
  </p>

预览：

可以看到，虽然 HTML 源代码中的 p 元素里的文本换行了，并且有多个空格，但是实际预览时，这段文本仍然在同一行，多个空格也变成了一个。如果要改变浏览器对空白字符的处理方式，例如空格和换行符，那么可以使用 css 的 white-space 属性来控制。

white-space 属性值可以是 normal、nowrap、pre、pre-wrap、pre-line 和 break-space 这几种，我们分别来看一下它们的作用。

normal​

normal 是 white-space 的默认值，也就是最终渲染的文本会根据容器的宽度进行换行，而不是根据源代码来换行，多个空格会合并成一个，例如下方代码所示：

<style>
  div {
    width: 200px;
    border: 1px solid hsl(220, 80%, 50%);
  }
  p {
    white-space: normal;
  }
</style>
<div>
  <p>
    CSS 是级联样式表（Cascading Style Sheets）。它不是一门编程语言，
    而是一种描述式、声明式的样式        表语言，用于给浏览器渲染的内容，
    如 html、svg 等，来添加样式的。
  </p>
</div>

预览：

这个效果和开头的示例一样。

nowrap​

nowrap 与 normal 类似，不同的是，即使文本超过了容器的宽度，也不会换行：

<style>
  div {
    width: 200px;
    border: 1px solid hsl(220, 80%, 50%);
  }
  p {
    white-space: nowrap;
  }
</style>
<div>
  <p>
    CSS 是级联样式表（Cascading Style Sheets）。它不是一门编程语言，
    而是一种描述式、声明式的样式        表语言，用于给浏览器渲染的内容，
    如 html、svg 等，来添加样式的。
  </p>
</div>

预览：

可以看到这段文字即使超过了 div 的宽度 100px，它也没有换行，多个空格同样合并成了一个。

pre​

设置 white-space 的值为 pre，就能够保留 HTML 源代码中的文本换行，和空格的数量，它会严格按照源码中的格式渲染文本，如果容器宽度不够，那么文本会溢出容器：

<style>
  div {
    width: 200px;
    border: 1px solid hsl(220, 80%, 50%);
  }
  p {
    white-space: pre;
  }
</style>
<div>
  <p>
    CSS 是级联样式表（Cascading Style Sheets）。它不是一门编程语言，
    而是一种描述式、声明式的样式        表语言，用于给浏览器渲染的内容，
    如 html、svg 等，来添加样式的。
  </p>
</div>

预览：

这里可以看到，渲染出的最终文本和源码中的格式是一样的，并且连 <p> 开头和结尾的换行，以及每行文本开头的空格也保留了。

pre-wrap​

pre-wrap 与 pre 不同的是，如果文本超过了容器的宽度，那么会自动换行，同时也会遵循源代码中的换行：

<style>
  div {
    width: 200px;
    border: 1px solid hsl(220, 80%, 50%);
  }
  p {
    white-space: pre-wrap;
  }
</style>
<div>
  <p>
    CSS 是级联样式表（Cascading Style Sheets）。它不是一门编程语言，
    而是一种描述式、声明式的样式        表语言，用于给浏览器渲染的内容，
    如 html、svg 等，来添加样式的。                                                                       
  </p>
</div>

预览：

可以看到，在文本超过了容器的宽度之后，会自动进行换行，并且源代码中的换行也保留了。

pre-line​

pre-line 与 pre-wrap 类似，不同的是，它会把多个空格合并成一个：

<style>
  div {
    width: 200px;
    border: 1px solid hsl(220, 80%, 50%);
  }
  p {
    white-space: pre-line;
  }
</style>
<div>
  <p>
    CSS 是级联样式表（Cascading Style Sheets）。它不是一门编程语言，
    而是一种描述式、声明式的样式        表语言，用于给浏览器渲染的内容，
    如 html、svg 等，来添加样式的。
  </p>
</div>

预览：

可以看到 声明式的样式 表语言 里的空格、<p> 元素开头结尾的换行、文本开头的空格都合并成了一个。

break-spaces​

break-spaces 的作用几乎和 pre-wrap 一样，保留空格和换行，并且根据容器的宽度自动进行换行，但是有不同的地方。在使用 pre-wrap 时，如果文本后面有一长串空格，并且超过了容器的宽度，那么这个空格是不会换行的：

<style>
  div {
    width: 200px;
    border: 1px solid hsl(220, 80%, 50%);
  }
  p {
    white-space: pre-wrap;
  }
</style>
<div>
  <p>
    CSS 是级联样式表（Cascading Style Sheets）。它不是一门编程语言，                                                     
    而是一种描述式、声明式的样式        表语言，用于给浏览器渲染的内容，
    如 html、svg 等，来添加样式的。格：                                                                                                          
  </p>
</div>

预览：

我在 CSS 是级联样式表（Cascading Style Sheets）。它不是一门编程语言， 后面写了一些空格，在渲染的时候，它的效果如下图所示：

img

可以看到，多余的空格，并没有根据容器宽度进行换行。而如果使用 break-spaces，那么就会换行：

<style>
  div {
    width: 200px;
    border: 1px solid hsl(220, 80%, 50%);
  }
  p {
    white-space: break-spaces;
  }
</style>
<div>
  <p>
    CSS 是级联样式表（Cascading Style Sheets）。它不是一门编程语言，                                                     
    而是一种描述式、声明式的样式        表语言，用于给浏览器渲染的内容，
    如 html、svg 等，来添加样式的。格：                                                                                                          
  </p>
</div>

预览：

效果如图：

img

小结​

本小节介绍了 CSS white-space 属性的用法，用于控制 HTML 最终渲染的文本是否应该保留源代码中的换行或空格，它有如下几个属性：

  • normal：默认值，不保留源代码中的换行符，并且多个空格会合并成一个，如果文本长度大于容器宽度，则会自动换行。
  • nowrap：不保留换行符，多个空格会合并成一个，并且当文本长度大于容器宽度时，也不会换行。
  • pre：保留换行符和空格数量（即与源代码中的格式保持完全一致），超出容器宽度时，不会自动换行。
  • pre-wrap：保留换行符和空格数量，但是会根据容器的宽度自动进行换行，如果有空格数量超过了容器宽度，那么空格不会换行。
  • pre-line：保留换行符，多个空格会合并成一个，并且根据容器的宽度自动换行。
  • break-spaces: 保留换行符和空格数量，当有多个空格超过了容器宽度时，会自动把空格进行换行。
最近更新于