在网页排版中，文本内容的空白与换行处理直接影响布局美观和可读性。CSS的white-space属性专门用来控制元素中空白符（空格、制表符、换行符）的处理方式，以及文本达到容器边界时是否自动换行。这个属性看似简单，但不同取值组合起来会产生完全不同的渲染结果，许多布局异常其实都源于对其理解不够清晰。
white-space属性的基本取值
white-space并非只有一个开关，而是一组取值，每个取值从两个维度决定行为：一是是否合并空白符（多个空格变一个、换行符变空格等），二是是否允许文本在达到容器宽度时自动换行（软换行）。通过组合这两个维度，CSS提供了normal、nowrap、pre、pre-wrap、pre-line以及pre-wrap的变体break-spaces。
从底层逻辑看，HTML源码中的换行和连续空格在默认情况下会被浏览器当作可折叠的空白。white-space的作用就是告诉格式化引擎，哪些空白必须原样保留，哪些可以忽略，以及是否在“软换行点”（如单词间）进行断行。下面的表格总结了常见取值的差异：
| 取值 | 合并空白符 | 保留源码换行 | 允许自动折行 |
|---|---|---|---|
| normal | 是 | 否 | 是 |
| nowrap | 是 | 否 | 否 |
| pre | 否 | 是 | 否 |
| pre-wrap | 否 | 是 | 是 |
| pre-line | 是 | 是 | 是 |
normal与nowrap的实战表现
normal是绝大多数元素的默认值。在normal模式下，源码里的换行符会被转换成空格，连续的空白符会被合并成一个空格，并且当文本长度超过容器时，浏览器会在单词间断行。这种处理最适合大段正文，既节省空间又不会出现奇怪的缩进。
nowrap则关闭了自动折行能力。所有空白依然合并，但文本永远不会主动换到下一行，结果就是文本可能溢出容器或者撑宽父元素。它常用于导航条中不让菜单项折行，或者配合overflow属性实现横向滚动。下面的代码展示了nowrap导致溢出的典型场景：
<div style="width:200px; white-space:nowrap; border:1px solid #ccc;"> 这一段文字非常长而且中间没有换行标记但是设置了nowrap所以不会折行导致溢出容器边界 </div>
如果希望溢出部分可滚动而非破坏布局，可以加上overflow-x:auto。需要注意的是，nowrap并不会删除源码中的换行，只是将其视为空格且不折行，因此长单词本身若超过容器仍可能溢出，此时需配合word-break使用。
pre系列取值与代码展示
pre取值模拟了HTML中<pre>标签的行为：空白符和换行完全保留，且不自动折行。这意味着你在源码里敲了几个空格，页面就显示几个空格；写了回车，页面就换一行。它非常适合展示需要保持缩进的程序代码，但缺点是一旦代码行过长就会横向溢出。
pre-wrap在pre的基础上打开了自动折行开关，既保留空格和换行，又能在容器不够宽时断行，是代码块展示的更优选择。pre-line则相反，它合并空白符但保留源码换行，并允许折行，适合从后台取出的带换行符但不需要多余空格的文本。以下示例展示pre-wrap如何兼顾格式与响应式：
.code-block {
white-space: pre-wrap;
word-break: break-all;
background: #f5f5f5;
padding: 12px;
}
在上面的样式中，pre-wrap保留用户输入的缩进与换行，word-break确保超长字符串也能断开。相比直接使用pre，pre-wrap能避免移动端出现横向滚动条，提升阅读体验。
break-spaces与细微差别
break-spaces是pre-wrap的增强版。两者都保留空白并允许折行，但break-spaces允许在保留的空格序列中间断行，且末尾空格也占据空间并可在此断行。对于需要精确还原文本编辑器中空格换行的场景（如对齐的文本画），break-spaces比pre-wrap更准确。
举例来说，一行结尾有十个空格，pre-wrap可能忽略这些空格后的断行机会，而break-spaces会保留其占位并允许在空格间折行。虽然日常业务中差异不明显，但在做在线代码编辑器或聊天排版时，这个取值能减少视觉错位。
常见误区与调试建议
一个典型误区是认为white-space:nowrap可以让内部所有内容不换行，从而用它在 flex 容器中防止子项收缩。实际上nowrap只管文本换行，弹性盒子的换行由flex-wrap控制，两者互不影响。另一个误区是给整个页面正文设pre，结果段落失去自适应折行，造成大范围横向滚动。
调试时，建议先用浏览器审查元素查看计算样式，确认white-space是否如预期生效。若文本仍换行，检查是否父级设置了不同取值或被word-break覆盖。通过小范围容器配合不同取值做对比测试，能快速建立直观认知。
小结
white-space属性通过控制空白合并与自动折行两个维度，提供了normal、nowrap、pre、pre-wrap、pre-line和break-spaces等能力。理解它们的差异，能帮你精准实现代码展示、防止溢出、还原文本格式等需求。在实践中，正文用normal，代码用pre-wrap，长行不折用nowrap，基本可以覆盖绝大多数排版场景。
CSSwhite_space文本换行修改时间：2026-08-07 18:48:28