HTML底层文本换行算法和强制不换行属性的应用场景

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> 加 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>）里换行总失败？检查这三件事

<td> 默认不换行不是 bug，是规范行为。要让它响应内容折行，缺一不可：

• 给 <td> 设 max-width 或 width（百分比或像素均可），否则没有“边界”可折
• 设 white-space: normal（或 pre-line），启用自动换行逻辑
• 对含长 URL / Base64 的内容加 overflow-wrap: break-word

额外但关键的一点：table-layout: fixed 必须加在 <table> 上。否则列宽由内容撑开，max-width 在 <td> 上形同虚设。

最容易被忽略的是：换行不是单个 CSS 属性的事，而是 display 类型 + 容器尺寸 + white-space + 断词策略 四者共同约束的结果。调一个属性没反应，先看 computed 样式里这四项的实际值。