浏览器默认折叠空白符是html规范行为；要显示多个空格，应使用white-space: pre-wrap或正确书写 （带分号），避免误用textcontent或未转义的innerhtml。

浏览器默认把连续空格、制表符、换行全压成一个空格，这不是 bug，是 HTML 规范里写死的「空白折叠」行为；想让多个空格可见，必须绕过这个折叠机制。

为什么写了四个 还是只显示一个空格

常见错误现象：&nbsp&nbsp&nbsp&nbsp（漏掉分号）→ 浏览器当普通文本渲染，不解析；或者在 Vue/React 的 v-html 或 dangerouslySetInnerHTML 里直接写未转义的   → 可能被二次解析或触发 XSS。

真正有效的写法是：    （每个都带分号）；但要注意：

•   是 Unicode U+00A0，语义为“不可断行空格”，不是视觉占位符
• 中英文混排时宽度不一致——依赖当前字体，中文下常比英文窄
• 堆超过 4 个   就该换方案，否则可维护性差、语义混乱

white-space: pre-wrap 是日常最稳的选择

它保留原始空格和换行，又允许自动折行，不会撑爆容器。比   更干净，也比 <pre class="brush:php;toolbar:false;"></pre> 少字体副作用。

使用场景举例：

• 后端返回带缩进的 JSON 字符串，前端要原样展示
• 用户提交的诗歌、日志、命令行输出
• 需要保留段落内首行缩进 + 多空格对齐的静态文案

参数差异注意点：

html-deploy

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

下载

• white-space: pre → 不折行，长文本会溢出，慎用
• white-space: pre-line → 合并空格，只留换行，不满足“多空格”需求
• white-space: normal（默认）→ 空白照旧折叠

 标签不是“加空格工具”，而是预格式化容器

<pre class="brush:php;toolbar:false;"></pre> 本质是 white-space: pre + font-family: monospace 的快捷写法。它不解决“怎么加空格”，而是“怎么原样呈现已有空格”。

容易踩的坑：

• 默认等宽字体导致中文发虚、字号偏小，得手动覆盖：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
• 内容含 <code>> 符号却没 HTML 转义 → 直接被解析为标签，结构错乱
• 用 <pre class="brush:php;toolbar:false;"></pre> 包动态内容（如 API 返回字符串），但忘了过滤或转义 → XSS 风险

实操建议：纯展示、内容可信（如自己写的示例代码），用 <pre class="brush:php;toolbar:false;"></pre> 最省事；否则优先用 <div style="white-space: pre-wrap;"> + <code>textContent 设置内容。

JS 动态插入空格时，textContent 和 innerHTML 行为完全不同

常见错误现象：element.textContent = 'a' + ' '.repeat(4) + 'b' → 页面仍只显示一个空格；因为 textContent 不解析 HTML，' ' 就是纯空格字符，照样被折叠。

正确做法：

• 想控制空格数量，优先走 CSS：element.style.whiteSpace = 'pre-wrap'; element.textContent = 'a b';
• 必须用实体，就得在 JS 字符串里写对：'a    b'（注意 & 要写成 &）
• 用 String.fromCharCode(160) 或 '\u00A0' 生成非断空格，再拼接

复杂点在于：不同上下文对空格的处理逻辑不统一——HTML 源码、innerHTML、textContent、CSS 属性三者各自有一套规则，混用时极易失效。最容易被忽略的是：你改了样式，却忘了检查内容来源是否已被上层框架提前处理过空白。