HTML默认压缩空格，可用 插入不可断行空格、white-space:pre-wrap保留多空格换行、letter-spacing微调字符间隙，动态内容需JS预处理或后端配合。
数字与字母之间空格被合并怎么办
浏览器默认会把“123 abc”中间的空格压缩成一个，哪怕你敲了五个空格也只显示一个。这不是 bug，是 HTML 规范行为——它不负责排版细节，只保留语义结构。
用 强制插入不可断行空格
这是最直接、兼容性最好的方案，尤其适合金额、单位、版本号等不能断行的场景。
-
- 写多个就显示多个：
123 kg渲染出三个空格宽度 - 别混用
- 注意：不要在属性值里用，比如
<div title="v1 beta">...</div>会导致 title 提示异常
用 white-space: pre-wrap 保留原始空格格式
当你要处理一整段含数字+字母+多空格的文本（比如日志、命令输出、配置项），white-space: pre-wrap 比堆 更干净。
- 它保留所有空格和换行，同时允许自动换行，不像
pre那样强制单行溢出 - 适用场景：
<span style="white-space: pre-wrap">CPU: 98% MEM: 4.2 GB</span> - 注意：该样式作用于整个元素，不能只对某两个字符生效；如果父容器有
text-align: justify，可能引发意外拉伸 - 性能无负担，但若批量用于列表项（如 100 行监控数据），DOM 节点数不变，渲染开销略高于纯文本
用 letter-spacing 微调视觉间距（慎用）
这不是加空格，而是拉宽字符间隙。仅在「统一增加数字与字母间呼吸感」时考虑，比如品牌名 “iOS 18” 或 “v2.3.0 beta”。
立即学习“前端免费学习笔记（深入）”；
-
letter-spacing: 1px对每个字符都生效，包括数字、字母、点、连字符——所以 “v2.3.0” 会变成 “v 2 . 3 . 0” - 若只想影响特定位置，得包裹目标文字：
v<span style="letter-spacing: 2px">2.3.0</span> beta - 负值（如
-0.5px）可能导致数字粘连，中文混排时更易出问题 - 它不改变 DOM 文本内容，复制粘贴出来仍是 “v2.3.0 beta”，没有真实空格
真正难的是边界情况：比如用户从 Excel 粘贴进 contenteditable 的 “ID: A123 STATUS: OK”，空格全被吃掉。这时候不能靠 修补，得在 JS 层做 textContent.replace(/ /g, ' ') ——但要注意别双重转义已存在的 。这类动态内容，white-space: pre-wrap + 后端预处理才是稳解。
