应使用 插入真正的不可折叠空格，它是Unicode字符\u00A0，能防止折行且浏览器兼容性最佳；其他空格实体宽度不稳定或支持差，仅在需语义化空格且禁换行时使用。

HTML 里怎么插入一个真正的空格字符

浏览器默认会把连续的空白符（空格、换行、制表符）压缩成单个空格，所以直接敲空格键没用。  是唯一能稳定输出一个不可折叠空格的 html 实体，它不会被合并、不会被忽略，也不会触发换行。

•   是 non-breaking space，本质是 Unicode 字符 \u00A0，不是普通空格 \u0020
• 别用多个普通空格拼——"　　"（中文全角空格）或 " "（两个 ASCII 空格）在 HTML 中都等效于一个空格
• 如果想控制「多个」空格宽度，用   连写就行，比如     就是三个固定空格
• CSS 的 white-space: pre 或 pre-wrap 能保留原始空格，但会影响整块文本的换行行为，不推荐只为加几个空格而改样式

什么时候该用  ，而不是 CSS

核心判断标准：是否需要「语义上就是空格」且「必须和前后文字在同一行」。典型场景是防止折行破坏格式，比如单位和数字之间、人名中间、缩写后跟句号等。

• 数字和单位之间：100 px（避免 100 px 在行尾断成两行）
• 中文姓名中的分隔（如“欧阳 修”）——防止单姓和名被拆到不同行
• 英文缩写后跟标点：Mr. Smith，否则 Mr. Smith 可能在 Mr. 后换行
• 不要用它对齐文字或做布局——那是 CSS 的事，  不是排版工具

  和其他空格实体的区别

HTML 有好几个空格相关实体，但绝大多数场景只用   就够了。其他要么太特殊，要么兼容性差。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

•   和   分别对应 en-width 和 em-width 空格，宽度依赖字体，渲染不稳定，IE/旧安卓支持弱
•   太窄，基本看不出效果，且 Safari 对它的间距处理不一致
•  （thin space）和  （hair space）属于 Unicode 标点空格，部分字体不支持显示，移动端容易出错
• 所有这些实体都不能被 CSS 的 text-transform 影响，但   是唯一被所有浏览器当作“真实字符”一致处理的

常见错误：复制粘贴带来的隐形空格

从 Word、网页或设计稿里直接复制文本，经常带入 Unicode 中的“全角空格”　（U+3000）、“细空格” （U+2009）甚至零宽空格​（U+200B），它们在编辑器里看不见，但会导致对齐异常或 JS 字符串比对失败。

• 检查方法：把疑似有问题的文本粘贴进浏览器控制台，执行 "text".split('').map(c => c.charCodeAt(0))，看是否有非 32 的空格码
• 修复建议：用正则批量清理，str.replace(/[\u2000-\u200F\u2028-\u202F\u3000]/g, ' ').replace(/\s+/g, ' ')
• 编辑器里开启“显示不可见字符”（VS Code 是 editor.renderWhitespace: "all"），能一眼识别混入的异形空格

事情说清了就结束。真正难的不是记住  ，而是意识到——你看到的“空格”，可能根本不是空格。