浏览器默认折叠空白符是HTML规范行为；要显示多个空格，应使用white-space: pre-wrap或正确书写 （带分号），避免误用textContent或未转义的innerHTML。
浏览器默认把连续空格、制表符、换行全压成一个空格，这不是 bug，是 HTML 规范里写死的「空白折叠」行为；想让多个空格可见，必须绕过这个折叠机制。
为什么写了四个 还是只显示一个空格
常见错误现象：    （漏掉分号）→ 浏览器当普通文本渲染，不解析；或者在 Vue/React 的 v-html 或 dangerouslySetInnerHTML 里直接写未转义的 → 可能被二次解析或触发 XSS。
真正有效的写法是： （每个都带分号）；但要注意：
-
- 中英文混排时宽度不一致——依赖当前字体，中文下常比英文窄
- 堆超过 4 个
white-space: pre-wrap 是日常最稳的选择
它保留原始空格和换行，又允许自动折行，不会撑爆容器。比 更干净，也比 <pre> 少字体副作用。
立即学习“前端免费学习笔记（深入）”；
使用场景举例：
- 后端返回带缩进的 JSON 字符串，前端要原样展示
- 用户提交的诗歌、日志、命令行输出
- 需要保留段落内首行缩进 + 多空格对齐的静态文案
参数差异注意点：
-
white-space: pre→ 不折行，长文本会溢出，慎用 -
white-space: pre-line→ 合并空格，只留换行，不满足“多空格”需求 -
white-space: normal（默认）→ 空白照旧折叠
<pre> 标签不是“加空格工具”，而是预格式化容器
<pre> 本质是 white-space: pre + font-family: monospace 的快捷写法。它不解决“怎么加空格”，而是“怎么原样呈现已有空格”。
容易踩的坑：
- 默认等宽字体导致中文发虚、字号偏小，得手动覆盖：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; - 内容含
<>符号却没 HTML 转义 → 直接被解析为标签，结构错乱 - 用
<pre>包动态内容（如 API 返回字符串），但忘了过滤或转义 → XSS 风险
实操建议：纯展示、内容可信（如自己写的示例代码），用 <pre> 最省事；否则优先用 <div style="white-space: pre-wrap;"> + 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 属性三者各自有一套规则，混用时极易失效。最容易被忽略的是：你改了样式，却忘了检查内容来源是否已被上层框架提前处理过空白。
