white-space 是控制 html 文本换行行为的底层开关，它定义空白符处理方式并决定是否允许自动折行；nowrap 强制忽略换行符且禁用自动折行，使文本横向延伸溢出；pre-line 适合保留换行但合并空格的场景，pre-wrap 则保留所有空白包括缩进；表格单元格需同时设置 width、white-space: normal 及 table-layout: fixed 才能正常折行。
white-space 是控制 HTML 文本换行行为的底层开关，它不“计算”换行位置，而是定义空白符（空格、\n、制表符）是否保留，以及是否允许在容器边界处自动折行。所谓“算法”，其实是浏览器按 CSS 规范逐条匹配的判定流程，不是动态计算。
white-space: nowrap 为什么能阻止换行
它强制关闭两项能力：一是忽略所有源码中的换行符（\n 被当普通空格处理），二是禁用自动折行逻辑。文本会像一条刚性胶带一样横向延伸，哪怕溢出容器也不断开。
常见误判点：
- 给
<span></span>加white-space: nowrap却没设display: block或宽度限制——内联元素无视width，所以“溢出”根本不可见，看似没生效 - 父容器是
display: flex且未声明flex-wrap: wrap，子项即使有white-space: normal也会被布局引擎压成单行 - 同时设置了
overflow-wrap: break-word，但white-space: nowrap优先级更高，断词规则直接被跳过
pre-line 和 pre-wrap 在用户输入场景怎么选
后端返回带 \n 的字符串（如评论、地址、日志），前端必须靠这两个值才能让换行符起作用；选错会导致空白丢失或滚动条出现。
pre-line 更常用：
- 合并连续空格和制表符，只保留
\n作为换行信号 - 允许在单词间自动折行，避免长 URL 撑破容器
- 适合大多数富文本摘要、表单提示、API 返回的纯文本字段
pre-wrap 仅在需要保留原始缩进时用：
- 源码含空格缩进（如 Markdown 预览、YAML 片段）
- 你明确希望“四个空格 = 缩进”，且不能被浏览器合并
- 注意：它仍允许折行，不会导致横向滚动（这点常被误认为等同于
pre）
表格单元格（<td>）里换行总失败？检查这三件事
<p><code><td> 默认不换行不是 bug，是规范行为。要让它响应内容折行，缺一不可：
<ul><li>给 <code><td> 设 <code>max-width 或 width（百分比或像素均可），否则没有“边界”可折
white-space: normal（或 pre-line），启用自动换行逻辑overflow-wrap: break-word
额外但关键的一点：table-layout: fixed 必须加在 <table> 上。否则列宽由内容撑开，<code>max-width 在 <td> 上形同虚设。
<p>最容易被忽略的是：换行不是单个 CSS 属性的事，而是 <code>display 类型 + 容器尺寸 + white-space + 断词策略 四者共同约束的结果。调一个属性没反应，先看 computed 样式里这四项的实际值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
