white-space: pre-wrap 是编辑器输出渲染的默认安全选择，它保留换行符和空格、允许自动折行且不溢出，但需搭配等宽字体和 overflow-wrap: break-word 防长单词溢出。
white-space: pre-wrap 是编辑器输出渲染的默认安全选择
绝大多数 HTML 编辑器（如 TinyMCE、Quill、CKEditor）在导出纯文本或用户输入内容时，会保留原始换行符 \n 和缩进空格。但直接插入 DOM 后，浏览器默认用 white-space: normal 渲染，导致所有换行和多余空格被抹平——这不是编辑器 bug，是 HTML 规范行为。
解决办法就是给输出容器显式设 white-space: pre-wrap：
- 它保留所有
\n和制表符、空格（包括开头缩进），同时允许长行在容器边界自动折行，不会横向溢出 - 不需要改编辑器配置，也不依赖
<pre class="brush:php;toolbar:false;"></pre>标签语义，适合套在<div> 或 <code><p></p>上 - 必须搭配等宽字体（如
font-family: monospace）才能看清缩进对齐，否则空格宽度不一致，格式错乱 - 注意：HTML 实体（如
、<code>&）仍需服务端或 JS 转义，否则pre-wrap不防 XSS - 把编辑器输出塞进
<pre class="brush:php;toolbar:false;"></pre>标签，又没加overflow-x: auto，结果整个页面被撑开 - 用
pre渲染评论区，用户贴了个长链接，右侧出现滚动条，移动端体验极差 - 以为
pre能解决换行问题，却忽略了它和pre-wrap的核心区别：是否允许软换行 - 合并连续空格和制表符，只留一个空格，避免因粘连空格导致文字挤在一起
- 保留
\n换行符，所以段落间仍有空行 - 自动换行，不溢出，也不强制等宽字体
- 比
pre-wrap更宽容：用户多打了几个空格，不会让排版歪掉 - 用
overflow-wrap: break-word（推荐，标准属性）而非已废弃的word-wrap: break-word - 不要用
word-break: break-all，它会在任意位置断英文单词，可读性差 - 组合写法：
white-space: pre-wrap; overflow-wrap: break-word; - 如果容器有固定宽度，建议同时设
max-width，避免响应式下意外撑宽
为什么不能用 white-space: pre 渲染编辑器内容
white-space: pre 看似“原样保留”，但它禁用自动换行——哪怕容器只有 200px 宽，一行 500 字符的 URL 也会硬撑着横向滚动，破坏布局。
常见误用场景：
真正需要 pre 的，只有代码块、日志这类必须严格对齐且宽度可控的场景。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
white-space: pre-line 适合带格式但不强调缩进的富文本摘要
如果编辑器输出的是用户写的短评、留言、标题描述，内容里有换行但缩进不重要（比如“第一段↵↵第二段”），pre-line 更轻量：
但注意：pre-line 会吃掉首行缩进——如果编辑器支持 Markdown 列表或引用块，首空格被合并后，视觉层级就没了。
配合 overflow-wrap: break-word 处理长不可折单词
即使用了 white-space: pre-wrap，遇到超长 URL 或 Base64 字符串，依然可能溢出。这时单靠 white-space 不够，必须加断词控制：
这个组合才是编辑器输出落地的最小安全配置——保留格式、不溢出、不断错词。
真正麻烦的不是选哪个值，而是混用时没意识到语义冲突：比如给 <pre class="brush:php;toolbar:false;"></pre> 加 pre-wrap 是冗余的，而给 <p></p> 加 pre 却忘了处理长单词，结果一半内容看不见。留心这些边界，比死记值表管用。
