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 class="brush:php;toolbar:false;"></pre>一样，但不等宽字体
• white-space: pre-wrap：保留空白和换行，同时允许自动换行（最常用）
• white-space: pre-line：合并连续空格，但保留换行符

例如：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

<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，避免把 当HTML解析失败

空格问题本质是渲染层和数据层的职责混淆——该用CSS控制显示，就别在HTML结构里硬塞字符。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！