移动端空格显示过宽是因iOS Safari等对系统字体空格glyph的特殊处理，叠加white-space与font-family组合导致；应改用margin/padding/flex gap等CSS方案替代空格字符。
移动端空格显示过宽的典型表现
文字中连续多个空格（如 、 ）在 iOS Safari 或部分 Android WebView 中被渲染成异常宽的间隙，尤其在 <pre class="brush:php;toolbar:false;"></pre>、<code> 或内联 span 里更明显；有时一个普通空格也撑开成 2–3 倍宽度，导致排版断裂、按钮文字错位、表单标签对不齐。
根本原因不是空格本身，而是 white-space 和 font-family 的组合行为
iOS 系统字体（San Francisco）对空格的 glyph 宽度处理较特殊，当 white-space 为 normal 或 pre-wrap 且父元素未限制 font-feature-settings 时，浏览器会保留空格语义但放大其视觉宽度；若还用了非系统字体（如自定义 WebFont），缺失空格字形 fallback 会进一步加剧拉伸。
- 不要依赖
-
white-space: pre会完全保留所有空格和换行，但极易触发横向溢出，慎用 - 系统字体下，
font-feature-settings: "liga" off, "clig" off可能意外影响空格连字逻辑，建议显式关闭无关特性
推荐替代方案：用 CSS 代替空格字符
把“靠空格分隔”的意图，转为“靠 margin / padding / inline-block 间距”实现，彻底绕过文本渲染层。
- 两个内联元素之间需要间隔？用
margin-inline-end: 8px，而非在 HTML 里加空格 - 想模拟「中文间插入英文词」的呼吸感？给英文
span加margin-inline: 0.2em，比空格更可控 - 表格单元格内多值并列（如「状态：正常｜时间：10:23」）？改用
display: flex; gap: 4px包裹子span，不依赖任何空白符 - 必须保留原始空格结构（如日志输出）？外层加
white-space: pre-wrap+overflow-x: auto+font-family: monospace，强制等宽字体兜底
真机调试时最容易忽略的一点
Chrome DevTools 的「Device Mode」默认用的是桌面级字体渲染管线，空格宽度看起来正常；但真机上开启「粗体增强」或「动态类型字号」后，空格会被系统级重绘拉宽。务必在 iOS 实机 + 「设置 → 显示与亮度 → 文字大小」调到最大档测试——这时暴露的问题，才是用户真实遇到的。
立即学习“前端免费学习笔记（深入）”；
