浏览器默认压缩连续空格为一个，这是HTML规范的空白折叠行为；需用 插入不可折空格或white-space:pre-wrap批量保留空白。

连续空格默认被浏览器压缩成一个，这不是 bug，是 HTML 规范强制要求的「空白折叠」行为；要完整显示，必须绕过解析阶段的折叠逻辑——核心就两条：用   硬塞单个不可折空格，或用 white-space: pre-wrap 批量接管整段文本的空白渲染。

为什么直接敲空格键完全无效

HTML 解析器在生成 DOM 前，就把所有连续空白字符（空格、制表符、换行）合并为单个空格，并丢弃首尾空白。你在编辑器里写 hello world，最终页面上永远是 hello world。这个过程发生在 JS 执行前、CSS 生效前，纯属 HTML 语法层规则。

• 用 textContent 动态赋值 'a' + ' '.repeat(5) + 'b' 同样失败——textContent 不解析 HTML，空格照常被折叠
• 在属性值里写 title="a b" 也无效，属性值同样受空白折叠约束
•   是唯一能保证“此处一定渲染一个可见空格”的实体， 和普通空格一样会被折叠

用   精确控制少量空格

适合字段对齐、单位分隔、防断行等语义明确的小范围场景，比如 姓名:  张三 或 100 px。

• 每个   渲染为一个不可断行、不被合并的空格；要 3 个空格就得写 3 次    
• 在 React/Vue 中，若用 v-html 或 dangerouslySetInnerHTML 插入，需确保字符串已转义，否则 & 可能被二次解析
• 别用它缩进整段文字——响应式下容易溢出，且违背语义（该用 text-indent 或 padding-left）
• 中英文混排时宽度不一致（依赖字体），别指望靠它做像素级对齐

用 white-space: pre-wrap 处理整段带空格/换行的内容

这是最实用的批量方案，尤其适合用户输入、日志、代码片段、诗歌等需要保留原始缩进和空格结构的场景。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

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

• pre-wrap 保留所有空格、制表符、换行，同时允许自动折行（不像 pre 那样撑破容器）
• 给 <p></p>、<div> 或 <code><td> 直接加样式：<code>style="white-space: pre-wrap;"
• 注意父容器限制：如果外层有 overflow: hidden 或 text-overflow: ellipsis，长空格行仍会被截断，需配合 word-break: break-word
• 动态内容务必先做 HTML 实体转义（如 → <code><），否则未闭合标签会被当真实 HTML 解析

为什么别轻易用 <pre class="brush:php;toolbar:false;"></pre> 标签

<pre class="brush:php;toolbar:false;"></pre> 本质是 white-space: pre 的快捷写法，但自带副作用：默认等宽字体、上下 margin、禁止嵌套在 <p></p> 内，还可能破坏表格布局流。

• 若只是想让普通段落多几个空格，硬套 <pre class="brush:php;toolbar:false;"></pre> 得额外重置 font-family、margin、line-height
• 内容来自 API 或用户输入时，<pre class="brush:php;toolbar:false;"></pre> 不做转义会直接执行 HTML，存在 XSS 风险
• border-collapse: collapse 下，<pre class="brush:php;toolbar:false;"></pre> 套 <td> 会导致垂直对齐异常、padding 错位 <li>真正需要「原样复刻」的场景才用它：ASCII 图、JSON 示例、命令行输出</li> <p>最难的不是让空格显示出来，而是判断该用 <code>  还是 white-space，或者干脆重构为 flex/padding——多数空格问题，根源是语义结构没理清，而不是渲染技巧不够。