CSS white-space 属性详解：控制空白与换行的艺术

Z~J~Q

于 2025-04-11 17:31:49 发布

阅读量1k

点赞数 6

文章标签： css 前端

本文链接：https://blog.csdn.net/xiaozhangluo/article/details/147149923

版权

在 CSS 中，white-space 是一个控制文本空白（空格、制表符、换行符）和换行行为的属性。它决定了元素内的文本如何显示，是否合并空格、是否自动换行，以及如何处理文本溢出。本文将详细介绍 white-space 的各个属性值、适用场景，并结合代码示例帮助开发者灵活运用。

1. `white-space` 属性值概览

white-space 主要有以下 6 个属性值：

属性值	合并空白符	保留换行符	自动换行	文本溢出处理
`normal`	✅ 合并	❌ 忽略	✅ 换行	默认换行
`nowrap`	✅ 合并	❌ 忽略	❌ 不换行	溢出显示 `...`（需配合 `text-overflow`）
`pre`	❌ 保留	✅ 保留	❌ 不换行	可能溢出容器
`pre-wrap`	❌ 保留	✅ 保留	✅ 换行	按需换行
`pre-line`	✅ 合并	✅ 保留	✅ 换行	按需换行
`break-spaces`	❌ 保留（包括行尾空格）	✅ 保留	✅ 换行	强制换行

2. 各属性值详解及使用场景

（1）`white-space: normal`（默认值）

行为：

合并连续的空白符（空格、制表符、换行符 → 变成一个空格）。
忽略源码中的换行符（\n）。
自动换行（当文本超出容器宽度时）。

适用场景：

普通文本段落（如 <p>、<div>）。
希望浏览器自动处理换行，不保留源码格式。

示例：

<p style="white-space: normal;">
  Hello     World
  This is a new line.
</p>

渲染效果：

Hello World This is a new line.

（2）`white-space: nowrap`

行为：

合并空白符。
忽略换行符。
禁止自动换行，文本会一直延伸直到遇到 <br> 或容器边界溢出。

适用场景：

单行文本（如导航菜单项、按钮文字）。
配合 text-overflow: ellipsis 实现溢出省略（...）。

示例：

<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100px;">
  This text will not wrap and show ellipsis if too long.
</div>

渲染效果：

This text will not wrap and show ellipsis if too...

（3）`white-space: pre`（保留空白，Preformatted）

行为：

保留所有空白符（源码中的空格、换行符）。
不自动换行（除非遇到 \n 或 <br>）。
类似 HTML <pre> 标签的行为。

适用场景：

显示代码块、ASCII 艺术、格式化文本。
需要严格保留原始排版的情况。

示例：

<pre style="white-space: pre;">
  Hello     World
  This is a new line.
</pre>

渲染效果：

  Hello     World
  This is a new line.

（4）`white-space: pre-wrap`

行为：

保留所有空白符（包括换行）。
允许自动换行（当文本超出容器宽度时）。

适用场景：

需要保留源码格式但允许自动换行的场景（如代码注释、诗歌）。
比 pre 更灵活，不会导致横向滚动条。

示例：

<div style="white-space: pre-wrap; width: 100px;">
  Hello     World
  This is a new line.
</div>

渲染效果：

Hello     World
This is a new line.

（5）`white-space: pre-line`

行为：

合并空白符（多个空格 → 1 个）。
保留换行符（\n）。
允许自动换行。

适用场景：

希望保留手动换行，但忽略多余空格（如用户输入的评论）。
类似 Markdown 的换行处理。

示例：

<div style="white-space: pre-line;">
  Hello     World
  This is a new line.
</div>

渲染效果：

Hello World
This is a new line.

（6）`white-space: break-spaces`

行为：

类似 pre-wrap，但 保留行尾空格 并允许换行。
如果行尾有空格，会强制换行（避免 pre-wrap 的潜在布局问题）。

适用场景：

需要精确控制空格的场景（如代码编辑器、终端模拟器）。
避免 pre-wrap 在某些情况下忽略行尾空格的问题。

示例：

<div style="white-space: break-spaces; width: 100px;">
  Hello     World    
  This is a new line.
</div>

渲染效果：

Hello     
World    
This is a new line.

3. 总结与最佳实践

场景	推荐属性值
普通文本（自动换行）	`normal`
单行文本（禁止换行）	`nowrap` + `text-overflow: ellipsis`
代码块、保留格式	`pre` 或 `pre-wrap`
保留换行但合并空格	`pre-line`
严格保留空格（包括行尾）	`break-spaces`