html手机端连续空格被压缩是因默认合并空白符，需用white-space: pre-wrap等css属性控制；推荐pre-wrap实现换行与空格保留，避免滥用 做对齐，优先采用padding、text-indent或flex布局。
HTML手机端连续空格不显示的常见现象
直接写多个 或普通空格，在手机浏览器里大概率被压缩成一个空格，甚至完全消失。这是因为 HTML 默认会合并空白符（包括空格、换行、制表符），移动端 WebView 和 Safari/Chrome for iOS 同样遵循这个规则，不是 bug，是规范行为。
用 white-space CSS 属性控制空白符渲染
最可靠的方式是用 CSS 覆盖默认行为。关键不是加多少空格，而是告诉浏览器“别动我的空白”：
-
white-space: pre：保留空格和换行，但不自动换行（文本会溢出容器） -
white-space: pre-wrap：保留空格和换行，且允许自动换行（**推荐用于正文场景**） -
white-space: pre-line：合并多余空格，但保留换行符（适合日志类内容）
示例：
<div style="white-space: pre-wrap;">用户名： 张三</div>
注意： 在 pre-wrap 下依然生效，但普通空格也终于能“堆叠”了——比如写 姓名： 李四，三个 会显示为三个空格宽度；而写 姓名： 李四（三个普通空格）在 pre-wrap 下也会显示为三个空格。
避免滥用 做对齐或排版
用一堆 模拟缩进或对齐，在不同字体、不同屏幕密度下极易错位，尤其 iOS 系统字体渲染更敏感：
- 替代方案优先用
padding-left、text-indent或 flex 布局 - 若真需等宽空隙（如表格对齐），改用
<span style="display:inline-block;width:2em"></span> - 纯文本场景（如代码片段）直接上
<pre class="brush:php;toolbar:false;"><code></code> 组合，天然支持空白保留</pre>
移动端兼容性要注意的细节
绝大多数现代移动浏览器都支持 white-space，但有两点容易忽略：
- 父容器设置了
overflow: hidden或text-overflow: ellipsis，可能截断pre-wrap内容，需配合word-break: break-word - iOS Safari 对
white-space: pre的换行处理略保守，遇到长无空格字符串（如一串 base64）仍可能不折行，此时要加word-break: break-all - 如果内容来自用户输入或 CMS，记得对
<code>>&做 HTML 实体转义，否则pre-wrap会把未闭合标签当真实 HTML 解析
真正难的不是让空格显示出来，而是判断哪里该用语义化布局、哪里才该动用 white-space——多数时候，空格问题本质是结构没理清。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
