HTML中普通空格会被浏览器自动合并为一个,需用 、标签或white-space: pre/pre-wrap来保留空白。

HTML 里普通空格会被浏览器自动合并
直接按键盘空格键输入的空格,在 HTML 渲染时会被浏览器压缩成一个空格,连续多个空格只显示一个。这不是 bug,是 HTML 规范行为。
- 原因:HTML 解析器会将文本中的连续空白字符(空格、换行、制表符)归一为单个空格
- 影响场景:排版对齐、缩进、诗歌、代码片段等需要保留空格的地方
- 解决方向:用语义明确的空白字符实体或 CSS 控制
是最常用且兼容性最好的空格符号
(non-breaking space)能强制显示一个不可换行的空格,浏览器不会合并它,也不会在该位置断行。
- 手机端写法:在支持 HTML 编辑的 App(如 Obsidian、Typora、某些博客后台)中,直接输入
四个字符即可 - 注意不要漏掉开头的
&和结尾的;,写成 或nbsp;都无效 - 适合单个空格补充,比如「姓名:
张三」防止冒号紧贴文字
pre 标签和 white-space: pre 是保留多空格的正解
如果要显示缩进、对齐或整段带空格的文本(比如日志、ASCII 图),靠堆 不现实,应该用结构化方式。
标签天然保留所有空白和换行,适合代码块、终端输出等- CSS 的
white-space: pre或white-space: pre-wrap可以让任意元素具备同样行为 - 手机写 HTML 时,
更易操作——只需包裹文本,不用逐个替换空格
这里有两个空格 这里顶格,但上面有缩进
手机输入 的实操要点
手机键盘没有专门的 HTML 实体键,需手动拼写,容易出错。
立即学习“前端免费学习笔记(深入)”;
- 推荐先复制好
存入备忘录,需要时粘贴——避免手误打成&nsbp;或  - 部分编辑器(如 WordPress 手机 App)有「插入 HTML 实体」按钮,可点选插入
- 切勿用全角空格(中文空格)、不间断空格 Unicode 字符(
\u00A0)替代,它们在某些环境渲染异常或无法被识别为 HTML 实体
、 还是 white-space——前者适合微调,后两者才是处理真实空白需求的合理方式。










