HTML中连续空白符被压缩为单个空格是规范行为；用 实现不换行空格；CSS的white-space属性可灵活控制空白处理；JavaScript中需用innerHTML或Unicode 160值避免压缩。
HTML 中的空格不需要开任何“特殊模式”，但浏览器默认会把连续多个空格、换行、制表符压缩成一个普通空格——这不是 bug，是规范行为。
为什么直接敲空格没效果
这是 HTML 的空白符处理规则决定的：所有连续的空白字符（ 、\t、\n）在渲染时被合并为单个空格。所以你在源码里写 或换几行，页面上只显示一个空格。
- 这是为了兼容早期 HTML 排版逻辑，不是浏览器 bug
- 不影响语义，但影响视觉排版
- 不影响可访问性，屏幕阅读器仍按单词读，不读空格
用 实现不可折行空格
是 HTML 实体，代表“不换行空格”（non-breaking space），它不会被浏览器压缩，也不会在行尾断开。
- 适合用于“100 km”、“Mr. Smith”这类需要保持连贯的场景
- 多个
- 缺点：大量使用会让 HTML 源码难读，且不利于国际化（某些语言空格规则不同）
CSS 的 white-space 更灵活
如果要保留源码中的所有空白（包括缩进和换行），用 CSS 控制比堆 更可靠：
立即学习“前端免费学习笔记（深入）”；
pre {
white-space: pre;
}
.code-block {
white-space: pre-wrap;
}
.inline-keep {
white-space: pre-line;
}
-
pre：完全保留空白和换行，类似<pre>标签 -
pre-wrap：保留空白，但允许自动换行（推荐用于用户输入内容） -
pre-line：合并多余空格，但保留换行符（适合带段落的纯文本） - 注意：
white-space对 inline 元素生效，但受父容器display影响
JavaScript 动态插入空格要小心编码
用 JS 设置 textContent 或 innerText 时，空格会被正常压缩；改用 innerHTML 才能识别 或标签。
-
el.textContent = "a b"→ 渲染为a b -
el.innerHTML = "a b"→ 渲染为a b -
el.innerHTML = "a" + " ".repeat(3) + "b"→ 还是只显示一个空格（因为纯空格字符串被压缩） - 安全做法：用
String.fromCodePoint(160)生成
真正要注意的不是“怎么打空格”，而是“想达到什么排版意图”——是防断行、保格式，还是对齐？选对方法比硬塞空格更稳。
