HTML中普通空格被合并是规范行为；可用 插入不换行空格、保留所有空白、CSS white-space属性精细控制，需注意兼容性与混用优先级。
为什么普通空格在HTML里会合并成一个
HTML解析器默认把连续的空白字符（空格、换行、制表符）压缩成单个空格，这是规范行为，不是bug。所以写 或敲三下空格键，浏览器最终只显示一个空格。
用 手动插入不换行空格
这是最直接、兼容性最好的方式，适合少量、确定位置的空格控制：
-
- 要显示4个连续空格，就得写：
- 注意：不要写成
   （漏掉分号），否则可能被忽略或解析为文字 - 缺点：可读性差、难以维护，不适合大段缩进或动态内容
用
当整块文本需要保留所有空白和换行（比如代码片段、ASCII艺术、对齐表格）， 是语义正确且开箱即用的选择：
姓名： 张三 年龄： 28 城市： 北京
它默认使用等宽字体并保留所有空白，但要注意：
- 样式不可控（如字体、行高、缩进），需配合CSS重置
- 响应式场景下容易溢出容器，建议加
white-space: pre-wrap或overflow-x: auto - 语义上表示“预格式化文本”，别滥用在普通段落里
用CSS的 white-space 属性精细控制
这是最灵活的方案，尤其适合动态内容或需要样式统一的场景：
- 常用值：
white-space: pre（保留空格+换行，不自动换行）、pre-wrap（保留空格+换行，允许换行）、pre-line（合并空格但保留换行） - 用法示例：
用户名： admin
- 注意：IE9+支持，但旧版Android WebView对
pre-wrap支持不稳定，关键项目建议测试 - 如果用JavaScript动态插入含空格文本，记得避免 innerHTML 被转义——优先用
textContent+ CSS 控制，而非拼接大量
真正麻烦的不是选哪个方案，而是混用时的优先级冲突：比如 里再设 white-space: normal 就会失效； 在 white-space: nowrap 下依然有效，但普通空格全消失。留空格这事，表面简单，实则处处要看上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
