html默认合并空格是规范行为，非bug；需原样显示时推荐用css white-space属性（如pre-wrap），其次pre标签，最后用 ；全局替换易导致维护难、语义不清等问题。

HTML里空格被合并是默认行为

浏览器会把连续多个空格、制表符、换行符全部压缩成一个空格，这是HTML规范定义的“空白字符折叠”规则，不是bug，是设计如此。

想原样显示，必须显式告诉浏览器“别折叠”，有三种常用方式：

• 用   替换每个空格（适合少量、静态内容）
• 用 <pre class="brush:php;toolbar:false;"></pre> 标签包裹（保留所有空白和换行，但会强制等宽字体+块级显示）
• 用CSS的 white-space 属性控制（最灵活，推荐）

用 white-space 控制空格显示最实用

这个CSS属性直接干预空白处理逻辑，常见取值和效果：

• white-space: pre; —— 像 <pre class="brush:php;toolbar:false;"></pre> 一样保留空格和换行，但不强制等宽字体
• white-space: pre-wrap; —— 保留空格和换行，且允许自动换行（最常用）
• white-space: pre-line; —— 合并连续空格，但保留换行符（类似普通段落加换行）

示例：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

<p style="white-space: pre-wrap;">hello   world</p>

会显示三个空格；hello world（直接敲空格）也生效。

为什么不用   全局替换

虽然   能强制空格不被折叠，但实际中容易踩坑：

• 复制粘贴文本时，  不会被当普通空格识别，导致搜索/匹配失败
• 写死在HTML里，后期维护难，比如要改空格数就得改多个  
• 和CSS样式冲突风险高（比如 text-transform: uppercase 对   无效）
• 语义不清：空格是排版需求，不是内容本身，用CSS控制更合理

<pre class="brush:php;toolbar:false;"></pre> 标签的副作用不能忽略

<pre class="brush:php;toolbar:false;"></pre> 确实原样显示，但它自带样式约束：

• 默认使用等宽字体（如 monospace），和页面其他文字风格不一致
• 是块级元素，会独占一行，内联场景（比如表格单元格里）需要额外 display: inline 覆盖
• 对缩进敏感：开头的空格/换行也会被渲染，容易多出意外空白

如果只是想让一段内联文本保留空格，优先选 white-space: pre-wrap + display: inline 组合。

真正需要原样显示代码或日志时，<pre class="brush:php;toolbar:false;"></pre> 才是正解，否则它只是个“带副作用的捷径”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！