HTML中敲空格需用不间断空格（ ），它不被合并、不折行；多空格场景推荐CSS white-space: pre-wrap；React/Vue中需注意实体写法，避免解析错误。

HTML里怎么敲一个空格？直接按空格键没用

浏览器会把连续的空白字符（空格、换行、制表符）全部压缩成一个空格，所以敲十下空格键，页面上只显示一个。真要“看到”空格，得用 html 实体或 css 控制。

最常用的是   —— 不间断空格（non-breaking space）。它不会被浏览器合并，也不会在行尾被折行吞掉。

•   是唯一能保证“这里一定有一个可见空格”的方案，适合标题里两个词之间、数字和单位之间（比如 100 px）
• 别用   或   除非你明确需要固定宽度（前者约半个汉字宽，后者约一个汉字宽），它们在字体不一致时表现不稳定
• 千万别写 （ASCII 空格的数字实体）—— 它和普通空格一样会被压缩，毫无意义

想控制多个空格？CSS 的 white-space 更靠谱

如果一段文字里要保留原始缩进或对齐（比如代码片段、诗歌排版），  写十个太傻，也难维护。这时候该让 CSS 出场。

给容器加 white-space: pre-wrap;，就能让里面的空格、换行都原样呈现，同时又支持自动换行。

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

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

下载

• pre：保留空格和换行，但不自动换行（容易撑破容器）
• pre-wrap：推荐首选，兼顾可读性和响应式
• white-space: break-spaces; 是新标准，但 Safari 旧版本不支持，线上慎用

React/Vue 里写   要小心语法陷阱

JSX 和 Vue 模板对 HTML 实体的解析方式不同，直接写   可能报错或被当成纯文本。

立即学习“前端免费学习笔记（深入）”；

• React 中必须写成 {"\u00a0"} 或 {String.fromCharCode(160)}，不能直接写  
• Vue 模板里   可以用，但放在 v-html 绑定的内容里会被转义，得用 v-html="'100 px'" 这种字符串拼接
• 更稳妥的做法：用 margin-left 或 padding 替代视觉空隙，语义更干净

空格太多导致布局错乱？先查是不是 font-family 搞的鬼

中文字体和英文字体对空格的渲染宽度差异很大。比如 font-family: "PingFang SC", sans-serif; 下，  可能比预期宽一倍；而用 Consolas 就很窄。

• 用浏览器开发者工具选中空格元素，看 computed 样式里的 width，常会发现是字体决定的
• 如果必须靠空格对齐，优先用等宽字体 + monospace 声明，避免混用中英字体
•   在不同字体下不是固定像素值，别拿它当栅格单位用

事情说清了就结束