浏览器默认压缩空白符是html规范行为；可用 插入不可断行空格、white-space:pre-wrap保留空白、标签语义化预格式化、word-spacing/letter-spacing视觉微调。

浏览器默认会把连续空格、制表符、换行都压缩成一个空格——这不是 bug，是 HTML 规范行为。想精确控制空格显示，得绕过这个默认折叠机制。

用   插入不可断行空格

这是最常用也最容易上手的方式，每个   渲染为一个固定宽度、不被合并、不换行的空格。

• 适合段落内微调间距，比如「姓名   张三」需要三个空格对齐
• 不能写在属性值里，例如 <div class="box "> 会报错或被忽略 <li>注意：<code>  是   的简写形式，但实际书写时必须写全  ，否则浏览器无法识别
• 和普通空格不同，  会影响文本可访问性（屏幕阅读器会读作“空格”），大量堆砌可能干扰语义

用 white-space CSS 属性保留原始空白

给容器加 white-space: pre; 或更实用的 pre-wrap，就能让里面所有空格、制表符、换行原样呈现。


html-deploy
使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
下载
• pre：完全保留空白，但不自动换行，长文本会撑破容器
• pre-wrap：推荐首选，保留空格和换行，同时允许折行，适合日志、地址、诗歌等格式化文本
• 只作用于该元素及其子文本节点，不影响其他区域
• 不要滥用在整页 上，会导致所有段落缩进、换行都失效

用 <pre class="brush:php;toolbar:false;"></pre> 标签包裹预格式化内容

<pre class="brush:php;toolbar:false;"></pre> 是语义化标签，天然带 white-space: pre; 行为，还默认用等宽字体。

• 适合代码块、终端输出、ASCII 图等需严格对齐的场景
• 如果不想用等宽字体，得额外加 CSS：font-family: inherit;
• 别为了插几个空格就套 <pre class="brush:php;toolbar:false;"></pre>，它会改变文本语义（暗示“这段内容有格式意义”）
• 可以嵌套其他标签，比如 <pre class="brush:php;toolbar:false;">&lt;code&gt;console.log('hello');&lt;/code&gt;</pre>

用 word-spacing 或 letter-spacing 做视觉微调

这两个属性不生成真实空格字符，而是通过 CSS 渲染拉伸间距，属于“看起来像空格”的方案。

• word-spacing 控制单词之间距离，单位支持 px、em、rem，比如 word-spacing: 0.5em;
• letter-spacing 控制每个字符间隙，适合标题字距调整，但设太大容易影响可读性
• 它们不影响 DOM 文本内容，复制粘贴时不会带出额外空格
• 不适合需要语义空格的场景（如机器解析、SEO 文本提取）

真正难的不是选哪种方式，而是判断哪一种不破坏语义、不增加无谓 DOM 节点、还能被后续维护者一眼看懂。比如对齐两个词，用   比用 margin-left 更轻量；但要是整段地址要保留缩进，white-space: pre-wrap 比堆十个   更可持续。