HTML5中空格“失效”是因浏览器遵循规范合并空白符，非Chrome缺陷；解决需用white-space属性（如pre-wrap）或CSS间距，而非依赖多个空格或 。
HTML5 中的空格在 Chrome 里本身不会“异常”，但你看到的“空格没生效”“多个空格只显示一个”“换行没了”这类问题，几乎全是 CSS 的 white-space 默认行为或 HTML 空白符处理规则导致的，不是 Chrome 的 bug，也不是 HTML5 的缺陷。
为什么 Chrome 里空格看起来“失效”了
HTML 规范规定：连续的空白字符（空格、制表符、换行）会被浏览器合并为一个空格；块级元素内的换行和缩进会被忽略。Chrome 严格遵循该规范，所以你在源码里写 10 个 或 5 行缩进，最终渲染很可能只显示一个空格。
-
- 普通空格（
white-space 标签能保留空白，但它会强制等宽字体 + 换行，不适合常规排版
用 white-space 精确控制空格行为
这是最常用也最可控的方案。它直接告诉浏览器“怎么对待空格和换行”。关键取值如下：
white-space: normal（默认）：合并空白，换行由内容宽度触发white-space: pre：完全保留源码空格和换行，类似，但不强制等宽white-space: pre-wrap：保留空格和换行，同时允许自动换行（推荐日常使用）white-space: pre-line：合并连续空格，但保留换行符（\n）
例如，在需要显示代码片段或地址字段时：
立即学习“前端免费学习笔记（深入）”；
.code-block {
white-space: pre-wrap;
font-family: monospace;
}
什么时候该用 ，什么时候不该用
只适合“防断行 + 单位空格”的场景，比如“第 1 章”防止数字和汉字被拆到两行。但它无法解决“显示多个空格”的需求。
- ✅ 正确用法：
姓 名→ 实际仍是单个不可断空格，视觉上并不变宽（多数字体下看不出区别） - ❌ 错误预期：以为写 3 个
- ⚠️ 替代方案：用
margin或padding控制间距更可靠，例如：姓名电话
服务端/模板输出时的隐藏坑
如果你用 Vue/React 或后端模板（如 Jinja、Thymeleaf），JSX 或模板语法中的换行缩进也会被 HTML 解析器吃掉——哪怕你写了 {" "} 或 {{" "}}，最终可能还是被合并。
- Vue 中可用
v-pre或white-space: pre-wrap包裹区域 - React 中推荐用
{"\u00A0\u00A0"}（Unicode 非断空格）代替多个空格字符串 - Node.js 模板若拼接字符串，确保没意外调用
.trim()或正则替换空白
真正难处理的从来不是 Chrome，而是开发者把“视觉排版需求”错误地交给了 HTML 空白符，而不是交给 CSS 或结构化标记。
