在编写HTML时你可能会发现一个现象：源代码里写了连续的空格、缩进甚至换行，浏览器渲染出来的却只有一个空格。这是因为HTML默认会把连续的空白字符合并成一个空格，忽略换行符。这种默认行为叫“空白折叠”，大多数时候它符合我们的排版预期，但当代码展示、用户评论、聊天记录这类需要保留原始格式的场景出现时，就必须借助CSS来改变默认行为。
一、HTML默认的空白处理规则
要理解CSS如何控制空格，先要知道默认规则是什么。HTML规范中定义了三类最常见的空白字符：空格（U+0020）、制表符（Tab，U+0009）和换行符（LF，U+000A）。浏览器在渲染时对它们的默认处理是：
- 连续出现的空白字符合并成一个空格；
- 换行符被当作空格处理，也就是说源码中的换行不会产生视觉上的换行；
- 制表符同样被折叠，不会保留缩进宽度。
看一个简单的例子，下面这段HTML源码中写了多个空格和换行：
<p>这是一段 带有多个空格
和换行的 文本内容</p>渲染结果会变成“这是一段 带有多个空格 和换行的 文本内容”，所有连续空白只留下一个空格。如果要打破这个规则，就需要用到white-space属性。
二、white-space属性的六种取值
white-space是控制空白处理的核心属性，它实际上同时决定了两件事：空白字符是否折叠，以及换行是否生效。常见的取值有以下几种：
| 取值 | 空白折叠 | 换行符有效 | 允许自动换行 |
|---|---|---|---|
| normal（默认） | 是 | 否 | 是 |
| nowrap | 是 | 否 | 否 |
| pre | 否 | 是 | 否 |
| pre-wrap | 否 | 是 | 是 |
| pre-line | 是 | 是 | 是 |
| break-spaces | 否 | 是 | 是 |
其中pre的行为等同于<pre>标签，文本完全按照源码格式显示，常用于展示代码块。而pre-wrap和pre-line是最容易混淆的两个值：前者保留所有空格且允许自动换行，适合展示用户输入的原始文本；后者会折叠空格但保留换行符，适合展示用户写的多行留言——缩进虽然丢了，但分段还在。
实际使用时可以这样写：
/* 展示用户评论，保留换行但折叠多余空格 */
.comment-content {
white-space: pre-line;
}
/* 展示代码，保留所有格式 */
.code-block {
white-space: pre-wrap;
font-family: Consolas, monospace;
}
/* 文本不换行，超出部分省略号显示 */
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}上面的第三个例子是单行文本溢出省略的经典三件套：nowrap禁止换行，overflow: hidden隐藏溢出内容，text-overflow: ellipsis显示省略号。三者缺一不可。
break-spaces是较新的取值，它和pre-wrap的区别在于：处于行尾的空格也会参与换行计算，而pre-wrap下末尾空格会溢出到容器边界之外。这个取值在处理对齐敏感的场景时很有用。
三、长单词溢出问题与word-break
除了空格折叠，另一个常见痛点是长单词或长URL撑破容器。浏览器换行的依据是“断行机会”，通常只在空格和标点处断行。一个没有空格的连续字符串（比如一个超长英文单词、一段哈希值、一个URL）会被当成不可分割的整体，宽度超出容器时直接溢出。
解决这类问题主要靠word-break和overflow-wrap两个属性：
/* 允许在任意字符处断行，包括单词内部 */
.url-text {
word-break: break-all;
}
/* 尽量在单词内断行，但优先在正常断点换行 */
.article p {
overflow-wrap: break-word;
}word-break: break-all比较激进，它会在任意字符之间插入断行机会，即使单词还没到边界也可能被拆开，排版观感较差。overflow-wrap: break-word则温和得多：只有当一行放不下某个单词时才把单词拆断，正常情况下仍然按空格换行。大多数场景下推荐后者。
另外还有word-wrap这个老属性，它其实是overflow-wrap的历史别名，现代项目直接使用overflow-wrap即可。对于中文内容，浏览器本身就允许在汉字之间断行，所以中文文章一般不会遇到长单词溢出的问题，混合中英文时才需要留意URL和英文长串的处理。
四、常见场景实战
最后把上面的知识点串起来看几个实际场景。第一个是聊天消息展示：用户发送的消息可能包含换行、连续空格甚至表格对齐的内容，最合适的方案是white-space: pre-wrap配合overflow-wrap: break-word，既保留格式又能防止长URL撑破气泡。
第二个是表格单元格内容强制不换行：某些数据列（如金额、编号）换行会影响阅读，可以给单元格设置white-space: nowrap，再配合max-width控制列宽。
td.amount {
white-space: nowrap;
}
/* 表格整体布局算法切换，配合nowrap效果更好 */
table { table-layout: fixed; }第三个是前端展示代码时字体的一致性问题。由于pre类取值保留空格后，缩进宽度取决于字体的字符宽度，务必使用等宽字体，否则用空格对齐的内容依然会错位。这也是为什么代码高亮组件里总能看到font-family: monospace的身影。
总结一下：white-space负责“空格保不保留、换行在哪里发生”，word-break和overflow-wrap负责“单词拆不拆”。理解了这几组属性的分工，页面上绝大多数空白和换行的排版问题都能迎刃而解。
css空格处理white-spaceword-break修改时间：2026-09-12 02:16:31