HTML中普通空格被合并是规范行为；可用 插入不换行空格、保留所有空白、CSS white-space属性精细控制，需注意兼容性与混用优先级。
为什么普通空格在HTML里会合并成一个
HTML解析器默认把连续的空白字符（空格、换行、制表符）压缩成单个空格，这是规范行为，不是bug。所以写 或敲三下空格键，浏览器最终只显示一个空格。
用 手动插入不换行空格
这是最直接、兼容性最好的方式，适合少量、确定位置的空格控制：
-
- 要显示4个连续空格，就得写：
- 注意：不要写成
   （漏掉分号），否则可能被忽略或解析为文字 - 缺点：可读性差、难以维护，不适合大段缩进或动态内容
用 <pre class="brush:php;toolbar:false;"></code> 标签包裹文本</H3>
<p>当整块文本需要保留所有空白和换行（比如代码片段、ASCII艺术、对齐表格），<code><pre class="brush:php;toolbar:false;"></code> 是语义正确且开箱即用的选择：</p>
<pre class="brush:php;toolbar:false;">姓名： 张三
年龄： 28
城市： 北京</pre>
<p>它默认使用等宽字体并保留所有空白，但要注意：</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>
<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>
<ul>
<li>样式不可控（如字体、行高、缩进），需配合CSS重置</li>
<li>响应式场景下容易溢出容器，建议加 <code>white-space: pre-wrap 或 overflow-x: auto
用CSS的 white-space 属性精细控制
这是最灵活的方案，尤其适合动态内容或需要样式统一的场景：
- 常用值：
white-space: pre（保留空格+换行，不自动换行）、pre-wrap（保留空格+换行，允许换行）、pre-line（合并空格但保留换行） - 用法示例：
<p style="white-space: pre-wrap">用户名： admin</p>，其中 - 注意：IE9+支持，但旧版Android WebView对
pre-wrap支持不稳定，关键项目建议测试 - 如果用JavaScript动态插入含空格文本，记得避免 innerHTML 被转义——优先用
textContent+ CSS 控制，而非拼接大量
真正麻烦的不是选哪个方案，而是混用时的优先级冲突：比如 <pre class="brush:php;toolbar:false;"></pre> 里再设 white-space: normal 就会失效； 在 white-space: nowrap 下依然有效，但普通空格全消失。留空格这事，表面简单，实则处处要看上下文。
