CSS的white-space属性用于设置如何处理元素内的空白字符和换行，包括空格、制表符、换行符等，不同的属性值对应不同的处理规则，能满足多种文本排版需求。
white-space的常用属性值
white-space有多个可选值，每个值对空白和换行的处理规则不同，具体如下表所示：
| 属性值 | 空格处理 | 换行处理 | 是否自动换行 |
|---|---|---|---|
| normal | 合并连续空格为单个 | 忽略源码中的换行 | 是 |
| nowrap | 合并连续空格为单个 | 忽略源码中的换行 | 否 |
| pre | 保留所有空格 | 保留源码中的换行 | 否 |
| pre-wrap | 保留所有空格 | 保留源码中的换行 | 是 |
| pre-line | 合并连续空格为单个 | 保留源码中的换行 | 是 |
各属性值效果演示
normal（默认值）
normal是white-space的默认值，浏览器会合并连续的空格和换行，文本超出容器宽度时自动换行。以下是测试代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.normal-box {
width: 200px;
border: 1px solid #ccc;
white-space: normal;
}
</style>
</head>
<body>
<div class="normal-box">
这是一段 测试文本
包含多个空格和换行
用来测试normal属性的效果
</div>
</body>
</html>
上述代码中，连续的多个空格会被合并为一个，源码中的换行也会被忽略，文本会在200px宽度内自动换行。
nowrap
nowrap会合并连续空格，忽略源码换行，且文本不会自动换行，超出容器部分会溢出。测试代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.nowrap-box {
width: 200px;
border: 1px solid #ccc;
white-space: nowrap;
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 溢出显示省略号 */
}
</style>
</head>
<body>
<div class="nowrap-box">
这是一段 测试文本
包含多个空格和换行
用来测试nowrap属性的效果
</div>
</body>
</html>
此时文本不会换行，多余内容会被隐藏并显示省略号，常见用于单行文本省略的场景。
pre
pre会保留所有空格和源码中的换行，文本不会自动换行，类似<pre>标签的默认效果。测试代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.pre-box {
width: 200px;
border: 1px solid #ccc;
white-space: pre;
}
</style>
</head>
<body>
<div class="pre-box">
这是一段 测试文本
包含多个空格和换行
用来测试pre属性的效果
</div>
</body>
</html>
可以看到连续的空格被完整保留，源码中的换行也会生效，文本超出容器宽度时不会自动换行，会出现横向滚动条。
pre-wrap
pre-wrap保留所有空格和源码换行，同时文本超出容器宽度时会自动换行，兼顾了格式保留和自适应排版的需求。测试代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.pre-wrap-box {
width: 200px;
border: 1px solid #ccc;
white-space: pre-wrap;
}
</style>
</head>
<body>
<div class="pre-wrap-box">
这是一段 测试文本
包含多个空格和换行
用来测试pre-wrap属性的效果
</div>
</body>
</html>
该场景下空格和换行都被保留，同时长文本会自动换行，适合展示代码片段、格式化文本等场景。
pre-line
pre-line会合并连续空格，但保留源码中的换行，文本超出容器宽度时自动换行。测试代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.pre-line-box {
width: 200px;
border: 1px solid #ccc;
white-space: pre-line;
}
</style>
</head>
<body>
<div class="pre-line-box">
这是一段 测试文本
包含多个空格和换行
用来测试pre-line属性的效果
</div>
</body>
</html>
此时连续的空格被合并为一个，但源码中的换行会生效，文本也会自动换行，适合需要保留原文换行但不需要保留多余空格的场景。
常见应用场景
- 单行文本省略：使用
white-space: nowrap配合overflow: hidden和text-overflow: ellipsis实现。 - 展示格式化文本：比如代码块、诗歌内容，使用
white-space: pre-wrap保留原有格式同时自适应容器宽度。 - 保留用户输入的原始换行：比如评论区、留言板内容，使用
white-space: pre-line保留用户输入的换行，同时合并多余空格。
CSSwhite-space文本换行空格处理修改时间：2026-07-05 19:24:12