浏览器默认合并连续空格是html规范行为，非bug；需用、标签或white-space css属性（如pre-wrap）保留多个空格，直接敲空格无效因解析器会折叠空白符。
浏览器默认会把连续空格合并成一个，这不是 bug，是 HTML 规范行为；想保留多个空格，得用 、<pre class="brush:php;toolbar:false;"></pre> 或 CSS 的 white-space 属性。
为什么直接敲空格键没用
你在编辑器里连按 5 次空格键，HTML 源码里确实有 5 个空格字符，但浏览器渲染时会把它们全压缩成 1 个——这是为了兼容早期网络带宽和语义化设计。普通空格（ASCII 32）在 HTML 中属于“空白符”，会被解析器统一折叠。
常见错误现象包括：
- 写
<p>姓名： 张三</p>，结果“姓名：”和“张三”之间只显示一个空格 - 用空格对齐表格内文字，完全不生效
- 复制粘贴代码后缩进全乱，因为换行+缩进被当成了无意义空白
适合单点防断行和微调间距
是 Unicode U+00A0，代表“不间断空格”。它不会被合并，也不会在行尾自动换行切开，但宽度仍受字体影响。
使用场景和限制：
- 防止“Mr. Smith”被拆成两行：写成
<p>Mr. Smith</p> - 需要 3 个空格？必须写 3 个
- 不能用于整段首行缩进——那是
text-indent的职责，硬塞 - 大量使用会增加 HTML 体积，屏幕阅读器可能读作“不间断空格”，影响无障碍体验
<pre class="brush:php;toolbar:false;"></pre> 和 white-space 是现代首选方案
<pre class="brush:php;toolbar:false;"></pre> 标签原意是“预格式化文本”，它会让内部所有空格、制表符、换行原样保留，并默认用等宽字体渲染。但它不是万能的：默认外边距大、超宽内容会触发水平滚动条、语义上仅适用于代码/日志/诗歌等场景。
更灵活的做法是用 CSS 的 white-space 属性：
-
white-space: pre-wrap：保留空格和换行，同时允许自动换行（最常用） -
white-space: pre-line：合并连续空格，但保留换行符（适合富文本中带换行的地址字段） -
white-space: break-spaces：空格也能换行（Chrome 83+ / Firefox 73+），但兼容性需检查 - 不要给
<h1></h1>或按钮加white-space: pre——破坏语义，SEO 和无障碍都受损
别用空格实体做布局，CSS 才是正解
如果目标是“让两个词之间看起来隔得更开”，优先考虑 word-spacing；如果是“每个字之间拉开距离”，用 letter-spacing；如果只是想让两块内容横向分离，应该用 margin-left 或 gap。
关键区别：
-
word-spacing: 12px是在单词边界加间隙，不影响文本内容提取 -
letter-spacing: 2px作用于每个字符，英文单词内部字母也会被拉宽 - 这些属性不生成真实空格字符，所以无法被 JS 的
textContent.split(' ')捕获 - 用
margin或padding控制元素间距，比堆
真正容易被忽略的是：空格处理本质是排版问题，不是字符问题。选错方案会导致维护成本陡增——比如后期要适配深色模式或响应式断点时，一堆 得逐个改，而一行 white-space: pre-wrap 就能全局控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
