浏览器默认压缩空白符是html规范行为，需用 、white-space属性或标签干预； 适合零星空格，white-space:pre-wrap最常用，适用于格式即内容的场景。

浏览器默认把连续空格、制表符、换行符都压缩成一个空格，这不是 bug，是 HTML 规范行为（white-space: normal）。想保留多个空格，得主动干预渲染逻辑。

用   插入不可折叠空格

这是最轻量、语义最明确的方式，适合零星调整，比如“姓名：  张三”中间加两个空格对齐。

•   是 non-breaking space，不会被合并，也不会在该位置换行
• 连续写多个，如     就是三个独立空格
• 不能用于属性值内部，比如 <div class="box  active"> 会解析失败 <li>无法用 CSS 控制宽度，所有 <code>  宽度固定，且依赖当前字体

用 white-space CSS 属性控制容器空白处理

适用于整段文本需保持原始缩进或空格格式的场景，比如代码片段、日志输出、ASCII 艺术。

• white-space: pre：保留所有空格和换行，但禁止自动换行（内容超宽会溢出）
• white-space: pre-wrap：保留空格和换行，同时允许长单词内断行，日常最常用
• white-space: pre-line：合并空格但保留换行符，适合清理冗余空格又想保留段落结构
• 别直接设 white-space: pre 在全局 或大容器上，容易破坏按钮、导航等组件的排版

用 <pre class="brush:php;toolbar:false;"></pre> 标签包裹纯文本块

当一段内容本身就是「格式即内容」时（如终端输出、配置文件片段），<pre class="brush:php;toolbar:false;"></pre> 是语义最正确的选择。


Wechat HTML Publisher
直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
下载
• 它默认启用 white-space: pre，且强制等宽字体，保留所有空白和换行
• 若要取消等宽字体，必须显式重置：<pre class="brush:php;toolbar:false;" style="font-family: inherit;"></pre>
• 不要嵌套在 <p></p> 内——<pre class="brush:php;toolbar:false;"></pre> 是块级元素，HTML 解析器会自动闭合前面的 <p></p>
• 编辑时需注意源码缩进：你在 HTML 文件里敲的空格，就是最终显示的空格

真正容易被忽略的是：空格问题从来不是孤立存在的。比如表格中用   对齐单元格，不如用 text-align + padding；用 white-space: pre-wrap 渲染用户输入内容时，记得先做 XSS 过滤——因为换行和空格可能裹着恶意标签进来。