HTML默认合并连续空白字符是规范行为，需用white-space属性控制； 仅适用于单空格场景，批量空格应通过CSS处理，避免语义混乱与无障碍问题。
HTML默认会合并连续空白字符
浏览器渲染时， 、多个空格、制表符、换行符都会被当作一个空格处理——这不是bug，是HTML规范行为。如果你在源码里写了"a b"或换行缩进的文本，最终页面只显示"a b"。
用white-space CSS属性控制空格渲染
真正起作用的是CSS，不是HTML标签本身。关键属性是white-space，不同值对应不同行为：
常用取值与效果：
-
white-space: normal：默认，合并空白、自动换行 -
white-space: nowrap：合并空白，但不换行（整行挤一起） -
white-space: pre：保留所有空白和换行，像<pre>一样，但不等宽字体 -
white-space: pre-wrap：保留空白和换行，同时允许自动换行（最常用） -
white-space: pre-line：合并连续空格，但保留换行符
例如：
<p style="white-space: pre-wrap"> hello world\nthis is line2</p>会原样显示缩进和换行。
立即学习“前端免费学习笔记（深入）”；
只能解决单个空格，别滥用
是“不换行空格”，它不会被合并，但每个 都算一个独立字符，无法替代排版逻辑：
- 写
hello world能强行塞三个空格，但语义混乱、可维护性差 - 响应式布局下，
- 屏幕阅读器会逐字读出
- 批量空格建议用CSS控制，不是靠堆
后端/模板中输出前清理或转义空格要小心
如果空格来自用户输入或数据库，直接插进HTML可能引发意外交互：
- 用
trim()或正则/^\s+|\s+$/g清理首尾空格，但别盲目replace(/\s+/g, ' ')——会把段落换行也压成空格 - 服务端模板（如Jinja、EJS）开启
autoescape时， - 前端JS插入文本时，用
textContent而非innerHTML，避免把
空格问题本质是渲染层和数据层的职责混淆——该用CSS控制显示，就别在HTML结构里硬塞字符。
