html标题中连续空格被浏览器压缩为一个且首尾空格被忽略；可用 插入不可折叠空格，或用white-space:pre-wrap保留原始空格与换行。
HTML标题中空格不显示？这是浏览器默认行为
HTML会把连续的空白字符（空格、换行、制表符）压缩成一个空格，如果标题里写了多个空格，最终只显示一个；如果空格在开头或结尾，还会被直接忽略。
用 插入不可折叠的空格
这是最常用也最稳妥的方式： 是 HTML 实体，代表“不间断空格”，浏览器不会把它和其他空格合并，也不会在行首/行尾丢弃它。
比如想让 <h2>Hello World</h2> 真的显示四个空格，得写成：
<h2>Hello World</h2>
- 每个
- 适用于标题、按钮文字、表格内对齐等需要精确空格控制的场景
- 注意不要滥用——过多
CSS 的 white-space 属性能保留原始空格
如果标题内容来自后端或用户输入，无法手动插 ，可以用 CSS 控制空白符渲染方式：
h3 {
white-space: pre;
}
-
pre：保留所有空格和换行，像<pre class="brush:php;toolbar:false;"></pre>标签一样渲染 -
pre-wrap：更实用——保留空格和换行，但允许自动折行（推荐用于动态内容） - 注意：
white-space: pre下，文字不会在容器边界自动换行，可能溢出
别用普通空格 + <span></span> 套样式来“模拟”空格
有人试图这样写：<h2>Hello<span style="margin-right: 20px"></span>World</h2>，看似加了间距，但本质不是空格，而是外边距。
- 语义错误：这不是空白字符，是布局偏移，对 SEO 和可访问性不友好
- 响应式问题：固定像素值在不同字号或设备下容易错位
- 复制粘贴时，
<span></span>间隙不会变成空格，文本会连在一起（如 “HelloWorld”）
真正需要空格语义的地方，就老实用 或 white-space，别绕远路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
