跳到主要内容位置

CSS 控制空白字符行为

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

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

预览:

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

white-space 属性值可以是 normalnowrapprepre-wrappre-linebreak-space 这几种,我们分别来看一下它们的作用。

normal#

normalwhite-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#

nowrapnormal 类似,不同的是,即使文本超过了容器的宽度,也不会换行:

<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-wrappre 不同的是,如果文本超过了容器的宽度,那么会自动换行,同时也会遵循源代码中的换行:

<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-linepre-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: 保留换行符和空格数量,当有多个空格超过了容器宽度时,会自动把空格进行换行。