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

浏览器会把连续的空白字符（空格、换行、制表符）全部合并成一个空格，所以你敲十下空格键，页面上只显示一个。

真正起作用的是 HTML 实体：  —— 它代表“不换行空格”（non-breaking space），浏览器不会把它和其他空格合并，也不会在它那里折行。

• 普通空格键输入 → 渲染为 1 个空格（无论你敲多少个）
•   → 渲染为 1 个强制保留、不可折叠、不可换行的空格
• 多个   连写，比如    ，才会显示三个空格

什么时候必须用  ？不是所有空格都要它

只在「语义或排版需要强制保留空白」时才用。比如人名中间的空格不能断行（如“阿米尔·汗”中间的点前后），或者金额数字和单位之间（¥ 199），避免被拆到两行。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 地址、姓名、品牌名中带空格且需保持紧凑： Microsoft Edge
• 表格单元格里对齐文字，比如右对齐数字后加单位：<td>123 kg</td>
• 纯文本段落里想多空一格（如中文段首缩进两个字）：用两个   比用 <span style="margin-left:2em"></span> 更轻量
• 别用它凑页内间距——那是 CSS 的活，比如 margin 或 padding

  和其他空格字符的区别

  最常用，但还有几个冷门但关键的替代项，选错会导致渲染异常或可访问性问题。

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

•  ：不换行空格，最安全，兼容所有浏览器和读屏器
•  ：宽度约等于字母 n 的空格（0.5em），适合微调对齐
•  ：宽度约等于字母 M 的空格（1em），比   宽一倍
•  ：极细空格（0.2em），常用于数学公式或标点前后，比如 10 °C
• 别用 \u00A0（Unicode 不间断空格）直接写在 HTML 文本里——编码出错时容易变乱码，  更稳

Vue/React 里写   要注意什么？

框架模板语法会把   当字符串处理，但容易因转义或插值方式翻车。

• Vue 模板中直接写：  ✅；但写在 v-text 或 {{ }} 里会被当纯文本，得用 v-html 或写成  （双重转义）❌
• React 中 JSX 不解析 HTML 实体，  会原样输出，必须写成 {"\u00A0"} 或 {String.fromCharCode(160)}
• 服务端渲染（SSR）或静态生成时，确保模板引擎没自动转义  ，否则变成  ，页面就显示文字 “ ”

实际项目里最容易漏掉的是：在国际化文案中硬编码  ，结果翻译成其他语言时，空格位置或数量不再合理。这类空格最好交给 CSS 的 white-space 或 text-indent 控制，而不是塞进文本内容里。