浏览器默认将连续空白字符折叠为单个空格，这是html规范行为；绕过方式包括使用 、white-space属性（如pre、pre-wrap）或标签。
浏览器默认会把连续空格、制表符、换行全部压缩成一个空格——这不是 bug，是 HTML 规范明确定义的行为。想让多个空格“可见”，必须绕过这个默认流程，而不是试图“修复”它。
HTML 解析阶段的空白折叠
从你写完 HTML 代码到页面渲染出来，空格要经过至少两道处理：
- HTML 解析器先将源码中所有连续空白字符（
\t、\n）合并为单个文本节点内的一个空格字符（U+0020） - 接着 CSS 渲染引擎根据元素的
white-space值决定是否保留、换行或丢弃这个空格
这意味着：哪怕你在源码里敲了十个空格，只要没加任何干预，最终 DOM 中对应位置很可能只有一个 文本节点，内容就是单个空格。
是怎么绕过解析折叠的
不是“空格键的加强版”，而是 Unicode 字符 U+00A0（non-breaking space），它在 HTML 解析阶段就被当作一个**不可折叠、不可换行的独立字符**处理。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 每个
- 它不受
white-space: normal影响，即使父元素没设任何样式也能稳定显示 - 但注意：
class="a b"会出错）
white-space 属性如何接管渲染控制
一旦你用 white-space 改变行为，就等于告诉浏览器：“别按默认规则走，我来定怎么处理空白”。
-
white-space: pre→ 保留所有原始空白（包括换行和 tab），但不自动折行 → 长文本容易溢出容器 -
white-space: pre-wrap→ 同样保留原始空白，但允许在必要时换行 → 大多数场景更安全 -
white-space: pre-line→ 合并空格，只保留换行 → 无法实现“连续空格”需求 - 别给整块列表或
直接加pre，会导致文本失去响应式折行能力
<pre class="brush:php;toolbar:false;"></pre> 标签背后的机制
<pre class="brush:php;toolbar:false;"></pre> 本质是浏览器内置了 white-space: pre + font-family: monospace 的快捷方式。它不是“魔法容器”，而是一套预设规则。
- 它对内部所有空白一视同仁：空格、tab、换行都原样保留
- 但它默认用等宽字体，若需改字体，必须显式用 CSS 覆盖（比如
font-family: system-ui） - 嵌套使用没问题，但别为了插三个空格就包一层
<pre class="brush:php;toolbar:false;"></pre>——语义失当，还可能引入意外边距
真正容易被忽略的是：这些方案解决的从来不是“怎么多打几个空格”，而是“如何让浏览器放弃默认折叠”。选哪一种，取决于你是在排版诗歌、展示日志，还是仅仅想让按钮文字和图标之间留点呼吸感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
