white-space是控制html元素内空格、换行符、制表符渲染的核心css属性；pre-wrap最常用，保留所有空白符且允许自动换行；pre完全保留格式但禁止换行；pre-line合并空格但保留换行符；误用会导致溢出或排版错乱。

white-space 是控制 HTML 元素内空格、换行、制表符如何渲染的核心 CSS 属性，不是靠堆   或改字体解决的。

white-space: pre-wrap 最常用也最安全

它保留所有原始空格和换行，同时允许内容在边界处自动换行，不会溢出容器。适合用户输入、日志、带缩进的说明文本等场景。

• 比 pre 更实用：不会因长单词或 URL 导致横向滚动
• 比 normal 更可控：连续空格不被合并，首尾空格也不被忽略
• 注意：设在 <p></p> 或 <div> 上即可，无需包裹额外标签 <li>示例：<code><p style="white-space: pre-wrap"> 第一行（两个前导空格）\n第二行</p>

white-space: pre 适合代码块但有副作用

完全按源码渲染——空格、换行、制表符全保留，但禁止自动换行，超宽内容会撑破父容器。


Wechat HTML Publisher
直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
下载
• 典型误用：给普通段落设 pre，结果文字跑出屏幕右侧
• 正确用法：配合 overflow-x: auto 做代码块，或限定固定宽度
• 和 <pre class="brush:php;toolbar:false;"></pre> 标签行为一致，但更灵活（可与其他样式共存）
• 注意：<pre class="brush:php;toolbar:false;"></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></span> 内的换行也会被保留，可能破坏内联布局
• 移动端小屏下，pre-wrap 对长无空格字符串（如 base64）依然无法换行，得额外加 word-break: break-all
• 真正需要像素级空隙时，white-space 不是解法——该用 margin、padding 或伪元素

空格是否显示，本质是浏览器对空白符的解析策略；white-space 是开关，不是胶水。用错地方，反而让语义和样式缠在一起，越调越乱。