浏览器默认压缩连续空格是html规范规定的空白折叠行为；可用 实体或white-space css属性绕过，其中 适合语义化空格，white-space:pre-wrap适合大段保留格式文本。
浏览器默认会把连续空格压缩成一个，这不是 bug，是 HTML 规范里明确规定的「空白折叠」行为。想让多个空格真正显示出来，得绕过这个机制——核心就两条路：用不可折叠的空格实体，或者用 CSS 告诉浏览器“别动我的空格”。
为什么直接敲空格键没用
HTML 解析器会把所有连续的空白字符（空格、制表符、换行）统一处理为单个空格，不管你在编辑器里按了几次空格键或回车。比如 <p>hello<space><space><space>world</space></space></space></p>，最终渲染出来就是 hello world，中间只有一个空格。
这种设计是为了让 HTML 源码可读性不受影响——开发者可以自由缩进、换行，而不影响页面表现。但代价就是：纯靠键盘空格无法控制视觉间距。
用 实现可控空格
是唯一被广泛支持、语义清晰、兼容性拉满的方案。它代表「不换行空格」，浏览器不会折叠它，也不会在行尾断开。
- 一个空格：写
- 三个空格：写
- 适合场景：数字和单位之间（
100 px）、标题中强制分隔（Mr. Smith）、表格内对齐微调 - ⚠️ 警告：
用 white-space CSS 属性批量控制
如果一段文本整体需要保留原始空格格式（比如日志、代码片段、诗歌），用 CSS 更干净：
-
white-space: pre：保留所有空格和换行，但不自动换行（超宽内容会溢出容器） -
white-space: pre-wrap：保留空格和换行，同时允许自动换行（日常最推荐） -
white-space: pre-line：合并连续空格，但保留换行（类似段落，只是换行生效） - 用法示例：
<p style="white-space: pre-wrap">hello world</p>→ 中间五个空格全显示 - ⚠️ 注意：
white-space会影响整个元素内所有文本，包括子元素里的换行行为，慎用于复杂内联结构
别踩 <pre class="brush:php;toolbar:false;"></pre> 标签的隐含坑
<pre class="brush:php;toolbar:false;"></pre> 确实能原样保留空格和换行，但它自带等宽字体（font-family: monospace）和 white-space: pre，容易破坏原有排版风格。
- 如果只是想保留空格，不想要等宽字体，必须显式覆盖：
<pre class="brush:php;toolbar:false;" style="font-family: inherit"></pre> -
<pre class="brush:php;toolbar:false;"></pre>内部的 HTML 标签（如<strong></strong>）仍可嵌套，但它的语义是「预格式化文本」，不适合用于普通正文中的局部空格控制 - 动态插入时要注意：JS 设置
textContent不会解析innerHTML才生效
真正难的不是选哪种方法，而是判断该不该用——多数时候，用 margin、padding 或 letter-spacing 做视觉留白，比硬塞一堆 更合理；只有当空格本身承载语义（比如防止换行、对齐不可分割的词组）时， 才是不可替代的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
