浏览器默认将连续空格折叠为一个，这是html规范行为；可用 插入不可折叠空格，或用white-space:pre-wrap等css属性保留空白，动态操作时应使用textcontent而非innertext。

为什么连续空格总被压成一个

浏览器默认按 white-space: normal 渲染，会把所有连续空白字符（空格、制表符、换行）折叠成单个空格，并忽略首尾空白。这不是 bug，是 HTML 规范行为。写 <p>hello   world</p>，页面上永远只显示一个空格——除非你主动干预。

用   插入不可折叠的空格

这是最直接、兼容性最好的方案，适合静态文本中精确控制空格数量：

•   是 non-breaking space，不会被折叠，也不会在行尾断开
• 要显示 4 个空格，就写     ，不能偷懒写成  {4}
• 别用 （ASCII 空格的数字实体），它和键盘空格一样会被折叠
• 慎用  （ ）或  （ ），它们宽度固定（≈0.5em / 1em），字体切换时容易错位

用 white-space CSS 属性批量保留空白

当一段文本里空格多、位置不固定，或者含换行，用 CSS 更省事：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• white-space: pre：完全保留空格和换行，但不自动换行（文本超宽会溢出）
• white-space: pre-wrap：推荐首选，保留空格和换行，同时允许长行自动折行
• white-space: pre-line：只保留换行，空格仍会被折叠，适合纯段落换行场景
• 注意：设置在 <p></p> 或 <span></span> 上即可，无需包裹额外标签

动态插入时别用 innerText

JavaScript 动态拼接带空格的字符串时，innerText 是陷阱：

• el.innerText += 'a b c' 中的空格会被读取时规范化，再写入时只剩一个
• 改用 textContent，它原样保留所有 Unicode 空白字符（U+0020、U+0009、U+000A）
• 如果内容含 HTML 标签且需渲染，必须用 innerHTML，但得先对空格做   转义，否则照样折叠

真正麻烦的不是选哪种方法，而是混用时的隐性冲突：比如给一个已设 white-space: pre-wrap 的元素又塞一堆  ，结果空格变双倍宽。实际项目里，优先约定一种方式并贯穿始终，比临时打补丁可靠得多。

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