white-space: pre-wrap 是最实用的通用方案，它保留换行与连续空格且允许自动折行，兼容响应式布局，无需修改HTML结构或强制等宽字体。
white-space: pre-wrap 是最实用的通用方案
多数场景下，直接给容器加 white-space: pre-wrap 就能同时保留换行、连续空格，并支持自动折行——不用改 HTML 结构，也不强制等宽字体。
它和 pre 标签行为接近，但更灵活：不会撑破父容器，也兼容响应式布局。常见踩坑点是误用 pre-line，它会把多个空格合并成一个，导致缩进丢失。
-
pre-wrap：保留所有空格 + 换行 + 允许折行（推荐） -
pre：保留所有空格 + 换行，但不折行（长文本会溢出） -
pre-line：只保留换行，空格全被合并（不适合缩进对齐）
用 标签时必须处理默认样式</H3>
<p><code><pre class="brush:php;toolbar:false;"></code> 确实原样保留空格和换行，但它默认用 <code>monospace</code> 字体、带上下 margin、不折行——这些在普通内容里往往突兀。</p>
<p>实际使用前至少要加两行 CSS：</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>重置字体：<code>font-family: inherit</code> 或指定你页面的主字体</li>
<li>控制换行：<code>white-space: pre-wrap</code>（覆盖默认的 <code>pre</code> 行为）</li>
<li>清理间距：<code>margin: 0</code>，否则上下会多出空白</li>
</ul>
<p>示例：<code><pre class="brush:php;toolbar:false;" style="font-family:inherit; white-space:pre-wrap; margin:0"> 第一行有两个空格\n 第二行有四个
JS 动态渲染时别用 textContent 插入含 \n 的字符串
后端返回或用户输入的文本含 \n，如果直接赋值给 textContent，换行符会被当普通字符忽略，显示成一整行。
正确做法是用 innerHTML 并配合 white-space: pre-wrap，或者先替换：
- 用正则转
\n→<br>：str.replace(/\n/g, '<br>') - 但注意：必须用
innerHTML赋值，textContent会把<br>当纯文本显示 - 若字符串来自不可信来源，需先做 XSS 过滤，再替换
手动插 只适合极小范围对齐
能防折叠、防换行，但它是“不可断空格”，浏览器不会在它后面断行——这在长段落里容易导致横向滚动或溢出。
它真正适用的场景非常有限：
- 表单标签对齐，比如
姓名： 张三 - 数字/单位之间防拆分，如
100 px - 绝对不要用它实现多行缩进，既难维护，语义也错乱
复杂格式还是交给 white-space 或 <pre class="brush:php;toolbar:false;"></pre>，别堆 。
