html标题中连续空格会被浏览器自动合并为一个，这是HTML默认的空白处理规则；如需保留多个空格，可用 、css white-space属性（如pre-wrap）或span+margin等方法，但需兼顾seo与可访问性。

html5 标题标签（

）里写空格，和普通文本一样直接敲空格键就行，但浏览器会自动合并连续空白字符——这是关键，不是“不能用”，而是“怎么用才生效”。

为什么标题里的多个空格只显示一个

HTML 规范定义：所有连续的空白字符（空格、制表符、换行）在渲染时会被折叠为单个空格。这跟

和

效果完全一样。

• 这是默认行为，与标签是否是标题无关，

  、

  都一样

• 不是 bug，是 HTML 的空白处理规则（white-space: normal 的表现）
• 想保留多个空格，必须显式干预 CSS 或改用特殊字符

想保留多个空格？用   或 CSS white-space

  是不换行空格（non-breaking space），浏览器不会折叠它，适合少量、确定位置的空格控制。

Front   End
 
ai     Dev

更灵活的方式是用 CSS 控制整个标题的空白行为：

立即学习“前端免费学习笔记（深入）”；

• white-space: pre：保留空格和换行，但不自动换行（文字超出容器会溢出）
• white-space: pre-wrap：保留空格和换行，且允许自动换行（推荐用于可读性要求高的场景）
• white-space: pre-line：合并多余空格，但保留换行符（适合带段落的标题，较少用）

Design    System    v2.3

用 包裹空格区域更可控

如果只希望某几个词之间加宽距，而不是整段标题都禁用空白折叠，用 配合 margin 或 letter-spacing 更语义清晰、易维护。

• 避免滥用   导致 HTML 冗余难读
• 响应式下 margin 可配合媒体查询动态调整
• 注意 letter-spacing 会影响所有字符间距，不是纯“空格”替代方案

WebPerformance

SEO 和可访问性提醒：别为视觉效果牺牲结构语义

用多个   或 white-space 强行撑开标题，可能让屏幕阅读器读出异常停顿（如 “Front   End” 被读成 “Front [pause] End”），或影响搜索引擎对关键词距离的判断。

• 标题本质是内容层级标记，不是排版工具
• 真有复杂排版需求（如 logo 式标题），应考虑 svg 或图片 + aria-label
• 移动端小屏下过宽的空格可能导致文字折行错乱，务必测试

空格本身没问题，问题总出在“以为敲了空格就一定显示出来”。真正要盯住的是浏览器的空白处理规则，以及你到底想解决什么问题：是微调词间距？对齐视觉设计稿？还是兼容旧 cms 输出的脏数据？不同目标，解法完全不同。