white-space: pre-wrap最常用且安全，它保留空格和换行符并允许自动换行；而pre禁止换行易致横向溢出，pre-line则合并连续空格。

直接用 white-space: pre-wrap，90% 的场景够用且安全。它既不引入 XSS 风险，也不需要 JS 预处理 HTML 实体，还能避免容器被长行撑破。

为什么不是 pre？

pre 确实保留所有空格和换行，但它禁止自动换行——只要有一行超长文本（比如用户粘贴的 Base64 或长 URL），容器就会横向溢出，触发滚动条或破坏布局。

• 常见错误：把后端返回的日志用 white-space: pre 渲染，结果右侧出现难看的横向滚动条
• 兼容性注意：IE8+ 支持 pre，但 IE7 及怪异模式下会退化为 normal
• 语义缺失：仅靠 CSS 没法传达“这是预格式化内容”，不如直接用 <pre class="brush:php;toolbar:false;">&lt;/code&gt; 标签语义清晰&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;&lt;code&gt;pre-wrap&lt;/code&gt; 和 &lt;code&gt;pre-line&lt;/code&gt; 怎么选？&lt;/H3&gt; &lt;p&gt;关键区别在&lt;strong&gt;是否保留连续空格&lt;/strong&gt;：&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/xiazai/skill11112&quot; title=&quot;CSS工具箱(专业版)&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg&quot; alt=&quot;CSS工具箱(专业版)&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill11112&quot; title=&quot;CSS工具箱(专业版)&quot;&gt;CSS工具箱(专业版)&lt;/a&gt; &lt;p&gt;全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill11112&quot; title=&quot;CSS工具箱(专业版)&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;ul&gt; &lt;li&gt;&lt;code&gt;pre-wrap&lt;/code&gt;：保留所有空格、制表符、换行符，且允许在容器边界自动折行 → 适合代码块、JSON 响应、带缩进的配置片段&lt;/li&gt; &lt;li&gt;&lt;code&gt;pre-line&lt;/code&gt;：合并连续空格（只留一个），但保留换行符，并允许自动折行 → 适合用户评论、富文本编辑器导出的纯文本，避免缩进错乱又保留段落结构&lt;/li&gt; &lt;li&gt;注意：&lt;code&gt;pre-line&lt;/code&gt; 会吃掉开头/结尾的空格，而 &lt;code&gt;pre-wrap&lt;/code&gt; 会保留（包括行尾空格）&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;配合 &lt;code&gt;overflow-wrap&lt;/code&gt; 处理长单词&lt;/H3&gt; &lt;p&gt;&lt;code&gt;white-space&lt;/code&gt; 控制的是空格和换行符行为，对“一整串无空格字符”（如 &lt;code&gt;https://example.com/very-long-path-with-no-hyphens&lt;/code&gt;）完全无效。这时必须叠加：&lt;/p&gt;&lt;p&gt;&lt;span&gt;立即学习&lt;/span&gt;“&lt;a href=&quot;https://pan.quark.cn/s/cb6835dc7db1&quot; style=&quot;text-decoration: underline !important; color: blue; font-weight: bolder;&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;前端免费学习笔记（深入）&lt;/a&gt;”；&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;code&gt;overflow-wrap: break-word&lt;/code&gt;：只在必要时断行，优先找空格/连字符，找不到才在长单词里断（推荐）&lt;/li&gt; &lt;li&gt;&lt;code&gt;word-break: break-all&lt;/code&gt;：粗暴地在任意字符间断，中文会断在字中间，慎用&lt;/li&gt; &lt;li&gt;示例：&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;code { white-space: pre-wrap; overflow-wrap: break-word; }</pre>

真正容易被忽略的是：即使用了 pre-wrap，如果父容器没有设定宽度或 max-width，自动换行也无从谈起；另外，pre-wrap 对 <textarea></textarea> 的 value 直接渲染无效——得把它塞进 <div> 或 <code><p></p> 才起作用。