white-space五值核心差异在空白符合并与换行：normal压缩空白并自动换行；nowrap仅禁换行；pre保留所有空白但不换行；pre-wrap保留空白且允许换行；pre-line压缩空格、保留换行并允许换行。
white-space 的这五个常用值，核心差异就两点：是否合并空白符（空格、制表符）、是否允许自动换行。选错值，轻则文字挤成一团或撑破容器，重则破坏语义和可访问性。
normal 是默认行为，但很多人误以为它“什么都不做”
它其实做了两件事：把连续多个空格/制表符压缩成一个空格；把换行符也当空格处理。然后在容器边界自动换行。
适合大多数段落文本，比如 <p> 或 <div> 里的普通内容。但注意：如果后端返回的字符串里有大量连续空格（比如从富文本粘贴过来），normal 会悄悄抹掉——这不是 bug，是设计如此。
nowrap 只禁换行，不保留空白
它不会保留你写的多个空格或换行符，该合并照样合并；唯一强制的是“不折行”。哪怕内容超出容器宽度，也硬生生拉长，导致横向溢出。
立即学习“前端免费学习笔记（深入）”；
常见误用场景：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 想让按钮文字不换行，却忘了加
overflow: hidden和text-overflow: ellipsis，结果文字跑出按钮外 - 用在表格单元格里，没设
min-width，导致整行被撑歪 - 以为它能“保留缩进”，实际缩进空格全被压成一个空格
pre 完全照搬源码格式，但默认不折行
效果等同于把文本塞进 <pre> 标签：所有空格、制表符、换行符原样呈现，且禁止自动换行。
典型风险：
- 一段带缩进的 JSON 放进
div并设white-space: pre，但容器宽度只有 200px —— 它不会折行，而是横向滚动或撑开页面 - 没配
overflow-x: auto，用户看不到右侧内容，还可能误以为数据缺失 - 语义混淆：非代码/日志类内容（比如用户评论）用了
pre，屏幕阅读器仍会按预格式化文本朗读，影响无障碍体验
pre-wrap 和 pre-line 都允许折行，但对空白的处理逻辑相反
pre-wrap：保留所有空白（空格、制表符、换行符），同时允许在单词间或空白处自动换行；pre-line：把连续空格压成一个，但保留换行符，并允许在单词间换行。
选哪个？看输入来源：
- 用户提交的日志、代码片段、带缩进的配置项 → 用
pre-wrap（既要格式又要可读） - 后台返回的富文本 HTML 片段（含
\n分段但无多余空格）→ 用pre-line（保留段落结构，避免空格污染） - 两者都需搭配
overflow-wrap: break-word处理超长无空格字符串（如 base64 或 URL）
最常被忽略的一点：pre 类值（pre、pre-wrap、pre-line）在 IE8+ 标准模式下才完全支持；IE7 或怪异模式会退化成 normal，且无法恢复。如果项目还要兼容老环境，得用 <pre> 标签兜底，或者改用 JS 预处理换行符。
