white-space: pre-wrap 是最稳妥的通用方案：它保留空格、缩进和换行，同时支持自动折行，兼顾兼容性与实用性，避免 pre 溢出和 pre-line 合并空格的问题。
white-space: pre-wrap 是最稳妥的通用方案
想让一段文本里的空格、缩进、换行全部原样显示，又不希望长行撑破容器，white-space: pre-wrap 是当前兼容性与实用性平衡得最好的选择。它保留所有原始空白，同时允许自动折行——不像 pre 那样容易溢出，也不像 pre-line 那样会吃掉你精心加的多个空格。
常见错误现象：给 <p></p> 加了 white-space: pre，结果代码块在小屏上横向滚动，用户得拖着看；或者用了 pre-line，发现“字段名： 值”里的三个空格全被压成一个。
- 静态内容（如文档片段、配置示例）直接加内联样式：
<p style="white-space: pre-wrap"> key: value</p> - 动态渲染时（比如 Vue 的
v-html或 React 的dangerouslySetInnerHTML），务必用textContent或转义后再设 innerHTML，避免 XSS - 别给整页或长列表加这个样式——它会让所有子元素内的空格逻辑都改变，可能意外影响按钮文字间距或链接排版
表格单元格里慎用 ，优先用 CSS 控制
<pre class="brush:php;toolbar:false;"></pre> 套 <td> 是典型反模式：它会重置字体、行高、垂直对齐，还可能让表格边框塌陷失效。真正该做的是给 <code><td> 本身加 <code>white-space: pre-wrap，再配合 overflow: hidden 或 max-width 防止撑开列宽。
容易踩的坑：border-collapse: collapse 下，padding 和 border 会掩盖空格视觉距离，调试时建议临时加 border: 1px solid red 看清真实边界。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 小范围对齐（如“状态： 在线”）用
- 大段带缩进的日志或 JSON，用
td { white-space: pre-wrap; font-family: ui-monospace, "SFMono-Regular", monospace; } - 绝对不要用全角空格（` `）——中英文混排时宽度浮动，iOS 和 Windows 渲染差异明显
用 时必须注意分号和上下文
不是“多按几次空格键”的替代品，它是独立字符实体，每个都要写全、带分号。漏掉分号（比如写成  ）会导致浏览器不识别，原样输出字符串，页面上直接显示“ ”。
使用场景非常有限：仅适合单词间防断行（Mr. Smith）、字段名后固定缩进（姓名： 张三）、或纯静态文案微调。
- React/Vue 模板中要写成
" " - 数量控制在 1–4 个以内；超过就该换
white-space或padding-left - 别嵌套用，比如
等宽字体不是默认选项， 的字体副作用必须覆盖
<pre class="brush:php;toolbar:false;"></pre> 默认用 font-family: monospace，但多数系统下中文 monospace 字体（如 Courier New）字形发虚、字号偏小、行距难控。这不是 bug，是它的设计使然。
如果你只是想保留空格逻辑，而不是真要“代码编辑器感”，那更干净的做法是用 <div style="white-space: pre-wrap; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;"> 替代 <code><pre class="brush:php;toolbar:false;"></pre>。
- 中英文混排时，
ui-monospace（macOS/iOS）或SFMono-Regular比传统monospace更稳 - 用
<pre class="brush:php;toolbar:false;"></pre>展示真实代码？记得对<code>>&做 HTML 转义，否则内容会被当标签解析 - 动态内容来自 API？宁可用
textContent+white-space: pre-wrap，也别图省事直接innerHTML塞<pre class="brush:php;toolbar:false;"></pre>
