white-space: pre-wrap 是跨行文本保留空格和换行的首选方案，它既保留所有空白符又允许自动换行，避免溢出与格式强加，优于 pre 和 pre-line，且无需修改 HTML 结构或滥用 pre 标签。

white-space: pre-wrap 是跨行文本保留空格的首选方案

跨行文本（比如带换行符的用户输入、日志、诗歌）里既有换行又有连续空格，white-space: pre-wrap 是唯一能同时满足「保留所有空格 + 允许自动换行」的 CSS 值。它不会让长行溢出容器，也不需要手动插入   或改写源码。

常见错误现象：white-space: pre 虽然保留空格和换行，但禁止自动换行——超宽内容直接撑破父容器；white-space: pre-line 会把连续空格合并，失去“多个空格”的效果。

• 静态文本直接加 style="white-space: pre-wrap;" 即可，无需改 HTML 结构
• 在 React/Vue 中，给包裹元素（如 <div> 或 <code><pre class="brush:php;toolbar:false;"></pre>）设置该样式，比用 v-html 渲染一堆   更安全、更易维护
• 注意：设了 pre-wrap 后，<span></span> 内的换行符也会被渲染为实际换行，若导致意外断行，可对内联子元素单独重置 white-space: normal

为什么不用

 标签直接包跨行文本

<pre class="brush:php;toolbar:false;"></pre> 确实原样保留空格和换行，但它自带两层副作用：默认等宽字体（font-family: monospace）和上下 margin。对普通段落或混合排版的跨行文本来说，这不是“保留格式”，而是“强加格式”。

使用场景限制明显：

立即学习“前端免费学习笔记（深入）”；

• 适合代码块、ASCII 图、纯日志输出这类本就该等宽显示的内容
• 如果只是展示一段带缩进的用户评论或带空格的歌词，套 <pre class="brush:php;toolbar:false;"></pre> 后必须额外写 CSS 重置：pre { font-family: inherit; margin: 0; }
• <pre class="brush:php;toolbar:false;"></pre> 不能合法嵌套在 <p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10595" title="htmlppt.skill"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="htmlppt.skill" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10595" title="htmlppt.skill">htmlppt.skill</a> <p>把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。</p> </div> <a href="/xiazai/skill10595" title="htmlppt.skill" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 里，HTML 解析器会自动闭合 <p></p>，造成 DOM 意外截断

动态内容中避免   连写失控

在模板中手动写     看似简单，但跨行文本往往来自后端 API 或用户输入，空格数量不可控。硬编码   不仅语义混乱，还容易因转义错误失效（比如漏写分号变成 &nbsp）。

实操建议：

• 服务端返回的字符串若含真实空格，前端直接用 white-space: pre-wrap 渲染，不预处理
• 必须用   的场合（如单位前固定间距），只用于静态、确定数量的场景（如 100 px），别用于整段文本
• 在 Vue/React 中，若需从变量插入含空格的 HTML，确保用 v-html 或 dangerouslySetInnerHTML，且内容已做过 XSS 过滤——  本身不是漏洞，但拼接未过滤的用户输入是

全角空格、 、  不解决跨行问题

全角空格（U+3000）、 （en space）、 （em space）确实能绕过空白折叠，但它们本质是“字符”，不是“空白控制指令”。它们无法保留换行，也不能响应 white-space 的行为变化。

典型误用：

• 用    替代缩进 → 实际宽度依赖字体，中英文混排时错位
• 在跨行文本中混用   和   → 可读性差，调试困难
• 期望   在换行后仍保持对齐 → 它只控制字符间距，不控制行首缩进或段落格式

真正需要跨行保留空格和换行时，CSS 的 white-space 属性是唯一可控、可继承、可响应式的基础机制。其他方案都是补丁，不是解法。