在开发移动端网页时，不少团队会将内容投放到微信内置浏览器里展示。一个容易被忽略的细节是，HTML源码中手写的连续空格，在微信端往往不会按原样输出，而是被合并成单个空白，导致段落缩进、对齐和分隔效果失效。这种现象并非微信内核独有，而是HTML规范中空白符折叠规则在起作用，但微信使用的 X5 或系统 WebView 在不同系统版本下表现略有差异，所以兼容处理仍有必要。
一、HTML空格为什么会显示异常
HTML规范规定，普通元素内的连续空白字符（包括空格、制表符、换行）在渲染时会被浏览器折叠为单个空格。这意味着你在源码里写十个半角空格，用户最终只看到一个。微信内置浏览器遵循这一规则，因此在普通 <div> 或 <p> 标签中，手敲的空格天然就会丢失。
另一个常见误区是认为微信不支持 实体空格。实际上 是不换行空格，属于独立字符，不会被折叠。但很多开发者直接在前端模板里用普通空格做间距，而非 或 CSS 控制，才会觉得微信端异常。此外，微信安卓端早期 X5 内核对于 white-space 的支持存在延迟，进一步放大了兼容问题。
1.1 空白折叠规则示例
下面这段代码在微信和普通浏览器中，视觉上均只显示一个空格间隔：
<p>姓名： 张三</p>
如果希望保留多个空格，就必须使用不被折叠的方案，后文会逐一说明。
二、微信端空格兼容的常用处理方案
最直白的方案是使用 HTML 实体 代替普通空格。由于 是字符实体，不会参与空白折叠，因此能稳定显示多个间隔。缺点是源码可读性差，且若内容来自数据库或用户输入，需要后端或前端主动替换。
另一种更现代的做法是使用 CSS 的 white-space 属性。例如设置 white-space:pre 或 white-space:pre-wrap，可让元素内的空白符原样保留。这种方式适合展示代码块、歌词、诗歌等强格式文本，但在普通段落中要谨慎使用，避免意外撑破布局。
2.1 使用 的代码示例
<p>姓名： 张三</p>
上述写法在 iOS 与安卓微信中都能稳定显示四个空格间隔。
2.2 使用 white-space 的代码示例
.text-pre {
white-space: pre-wrap;
}
<p class="text-pre">姓名： 张三</p>
通过 CSS 控制，源码中的连续空格会被完整保留，且能自动换行，对移动端更友好。
三、不同场景下的选型建议
如果文本由用户编辑并存储于后台，建议在保存时将所有半角空格转为 ，或在前端渲染前做字符串替换。这样可以避免微信端因空白折叠导致排版错乱，也降低了对 CSS 环境的依赖。
如果页面本身使用 Vue 或 React 等框架，推荐在组件层统一处理：对纯展示型文本使用 white-space:pre-wrap 样式类，对行内间隔使用 。下表列出两种方案的核心差异：
| 方案 | 兼容性 | 维护成本 | 适用场景 |
|---|---|---|---|
| 实体 | 所有微信版本 | 低，需替换源码 | 短文本、固定内容 |
| white-space CSS | 较新 WebView 支持好 | 低，样式统一 | 动态文本、多空格块 |
综合来看，新项目应优先采用 white-space 方案，老页面可局部用 修补。只要不依赖浏览器默认空格解析，就能在微信端获得一致的显示效果。