white-space是控制HTML元素内空格、换行符、制表符渲染的核心CSS属性；pre-wrap最常用，保留所有空白符且允许自动换行；pre完全保留格式但禁止换行；pre-line合并空格但保留换行符；误用会导致溢出或排版错乱。
white-space 是控制 HTML 元素内空格、换行、制表符如何渲染的核心 CSS 属性，不是靠堆 或改字体解决的。
white-space: pre-wrap 最常用也最安全
它保留所有原始空格和换行，同时允许内容在边界处自动换行，不会溢出容器。适合用户输入、日志、带缩进的说明文本等场景。
- 比
pre更实用：不会因长单词或 URL 导致横向滚动 - 比
normal更可控：连续空格不被合并，首尾空格也不被忽略 - 注意：设在
<p>或<div>上即可，无需包裹额外标签 - 示例：
<p style="white-space: pre-wrap"> 第一行（两个前导空格）\n第二行</p>
white-space: pre 适合代码块但有副作用
完全按源码渲染——空格、换行、制表符全保留，但禁止自动换行，超宽内容会撑破父容器。
- 典型误用：给普通段落设
pre，结果文字跑出屏幕右侧 - 正确用法：配合
overflow-x: auto做代码块，或限定固定宽度 - 和
<pre>标签行为一致，但更灵活（可与其他样式共存） - 注意：
<pre>默认用等宽字体，white-space: pre不强制，需手动设font-family: monospace
white-space: pre-line 处理“看起来像普通段落”的需求
它会合并连续空格（只留一个），但保留换行符，效果接近你粘贴一段带回车的纯文本。
立即学习“前端免费学习笔记（深入）”；
- 适用场景：后台 CMS 富文本编辑器输出、邮件正文、Markdown 渲染后段落
- 和
normal的关键区别：\n会被转成<br>效果，而normal直接忽略换行 - 不保留制表符（
\t）和多个空格，这点常被忽略 - 若原文本含
pre-line合并逻辑影响）
别在全局或按钮上乱设 white-space
这个属性作用于整个元素及其所有子节点，容易引发连锁排版问题。
- 错误做法：
body { white-space: pre-wrap; }→ 所有按钮文字、导航链接、表单 label 都开始保留缩进和换行 - 更隐蔽的问题：设了
pre后，<span>内的换行也会被保留，可能破坏内联布局 - 移动端小屏下，
pre-wrap对长无空格字符串（如 base64）依然无法换行，得额外加word-break: break-all - 真正需要像素级空隙时，
white-space不是解法——该用margin、padding或伪元素
空格是否显示，本质是浏览器对空白符的解析策略；white-space 是开关，不是胶水。用错地方，反而让语义和样式缠在一起，越调越乱。
