html标题中空格被合并需用 实体或white-space: pre-wrap;css属性解决，前者适合固定空格数，后者支持换行且保留空白，避免使用标签破坏语义与样式。
HTML标题里空格被合并怎么办
HTML默认会把连续多个空格、换行、制表符全部压缩成一个空格，所以直接在<h1>标题 文字</h1>里敲多个空格，页面上只显示一个。
用 实体替代空格
这是最常用也最稳妥的做法——把每个需要保留的空格替换成 （non-breaking space）。
-
- 它不会被折叠，也不会换行，适合控制紧凑间距
- 比如：
<h2>左对齐 右对齐</h2>，中间三个 - 注意：必须写成
&，否则就是纯文本nbsp;
用white-space CSS属性控制
如果空格数量不固定，或想批量处理标题，更适合用CSS。给标题加white-space: pre;或white-space: pre-wrap;：
-
pre：完全保留空格和换行，但**不自动换行**（长标题可能溢出容器） -
pre-wrap：保留空格和换行，同时**允许正常换行**，更实用 - 示例：
<h3 style="white-space: pre-wrap;">标题 带多个空格</h3> - 注意：该样式会影响整个元素内的空白行为，包括换行符；如果标题里混用了
<br>，效果可能和预期不同
为什么不用<pre class="brush:php;toolbar:false;"></pre>包裹标题
有人试过把标题包进<pre class="brush:php;toolbar:false;"></pre>标签来保留空格，这其实不合适：
-
<pre class="brush:php;toolbar:false;"></pre>是块级语义化标签，用于显示预格式化文本（如代码），和<h3></h3>的语义冲突 - 它自带等宽字体和上下外边距，破坏标题的视觉一致性
- SEO和无障碍支持差——屏幕阅读器可能误读为代码段落
- 正确做法是保持
<h3></h3>结构，仅用CSS或
真正要注意的是：空格语义本身在HTML里就很弱，与其纠结“几个空格”，不如想清楚这里是否真需要靠空格对齐——如果是排版需求，用margin、padding或Flex布局通常更可控；只有当空格是内容一部分（比如人名中的固定间隔、电报式文本）时，才该用 或white-space。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
