HTML默认合并连续空白字符，可通过 实体或white-space CSS属性（如pre、pre-wrap）保留空格，服务端/JS需转义或结合textContent避免XSS，不同场景应选对应方案。

HTML里空格为什么会自动合并

浏览器默认会把多个连续空格、换行、制表符都当成一个普通空格处理，这是HTML规范定义的“空白字符折叠”行为。你写     或者敲三下空格，最终页面只显示一个空格宽度。

用   手动替换空格

最直接的办法是把每个需要保留的空格替换成  （no-break space）。适合少量、静态内容。

• 纯文本中多个空格：写成 Hello   World → 显示为“Hello World”
•   是HTML实体，不能写在属性值里当普通字符用，比如 title="a  b" 不生效
• 注意别和 （ASCII空格）混淆——后者照样会被折叠

用 white-space CSS 控制整块区域

对容器元素设置CSS样式，让内部所有空白字符按原样渲染，适合日志、代码片段、对齐文本等场景。

Wechat HTML Publisher

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

下载

• 常用值：white-space: pre（保留空格和换行，不自动换行）
  white-space: pre-wrap（保留空格和换行，但允许换行）
• 必须作用于包裹文本的标签，比如 <pre> 默认就有 white-space: pre，但 <div> 需要手动加样式
• 示例：<div style="white-space: pre-wrap">abc def</div> 会显示三个空格
• 注意：该样式也会影响换行符，如果源文本含 \n，它会真实换行

服务端或JS输出时提前转义

如果空格来自变量或API响应，不能硬写  ，得靠逻辑处理。

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

• JS中可对字符串做替换：str.replace(/ /g, ' ')（注意   要双写 & 防止被解析）
• 更稳妥的是用 white-space: pre-wrap + textContent 输出，避免XSS风险；若用 innerHTML，务必确保内容已过滤
• 后端模板（如Jinja、Twig）常有 |forceescape 或类似过滤器，但它们一般不处理空格折叠，得配合CSS或额外替换

真正麻烦的不是怎么保留空格，而是得时刻判断：这里是要对齐？是代码缩进？还是用户输入的富文本？不同目的对应不同解法，混用容易导致样式错乱或语义丢失。