html中连续空格被浏览器自动合并为一个，可用 强制显示不换行空格；等宽对齐宜用 或；大段文本推荐white-space:pre-wrap配合等宽字体；禁用全角空格。
HTML里普通空格会被自动合并
浏览器默认把连续多个空格、换行、制表符都压缩成一个空格，所以直接敲四个空格，页面上只显示一个。这不是bug，是HTML规范定义的空白符处理规则。
- 用
-
- 注意：
 无效 - 它会阻止文字在该位置断行，适合用于“图 1”、“第 3 章”这类需要保持间距的场景
需要等宽对齐时用 或
如果目标是排版对齐（比如模拟代码缩进或表格对齐）， 宽度不固定，容易错位。这时候更合适的是：
-
-
- 它们在多数字体下宽度稳定，比堆
- 但注意：老版本IE可能不支持，现代浏览器（Chrome/Firefox/Safari/Edge）都没问题
CSS的 white-space 属性更适合大段预格式文本
如果整块内容都需要保留原始空格和换行（比如日志、代码片段、ASCII art），硬塞一堆 既难写又难维护。直接用CSS更干净：
- 给容器加样式
white-space: pre;—— 保留空格和换行，但不自动换行 - 或
white-space: pre-wrap;—— 保留空格和换行，同时允许长行自动折行 - 这样里面写
let x = 1;（开头四个空格）就会原样显示 - 别忘了配合
font-family: monospace;，否则空格宽度可能不一致
别用全角空格替代
有人会想到复制中文输入法下的全角空格（ ），虽然它确实占位宽，但问题不少：
- 语义错误：它本质是中文字符，不是空白符，搜索引擎、屏幕阅读器、代码分析工具都可能误判
- 编码风险：如果HTML没声明
charset="UTF-8"，全角空格可能乱码成 - 不可选中/不可编辑：某些编辑器里全角空格粘连性强，删起来费劲
- 宽度不可控：不同字体下全角空格宽度浮动更大，不如
最稳妥；对齐需求优先选 / ；大段结构化空白直接上 white-space CSS。别为了省事混用全角字符，后期维护成本会悄悄变高。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
