浏览器默认压缩连续空格是HTML规范规定的空白折叠行为；可用实体或white-space:pre-wrap CSS属性强制显示多个空格，前者适合小范围精确控制，后者推荐用于用户输入等需保留空格与换行的场景。

浏览器默认把连续空格压缩成一个，这不是 bug，是 HTML 规范强制规定的「空白折叠」行为。想强制显示多个空格，必须绕过这个规则——核心就两条：用   硬塞，或用 white-space CSS 属性接管渲染逻辑。

用   实体插入不可折叠空格

这是最直接、最可控的方式，每个   渲染为一个固定宽度、不可换行、不被合并的空格。

• 写法必须是  （注意末尾分号不能漏），写成 &nbsp 或 &nsbp; 都无效
• 适合小范围精确控制：比如 姓名:  张三 表示两个空格间距
• 在 React/Vue 中动态插入时，需确保使用 innerHTML 或 v-html，textContent 会原样输出字符串，不解析实体
• 别堆超过 4 个——中英文混排时字体宽度不一致，视觉错位风险高；大量使用会让 HTML 可读性崩坏

用 white-space: pre-wrap 批量保留空格和换行

这是现代项目中最推荐的方案，尤其适合用户输入、日志、代码片段等含多空格+换行的文本。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• pre-wrap 保留所有空格、制表符、换行符，同时允许自动折行，不会撑破容器
• 比 pre 更安全：pre 不折行，长无空格字符串（如 base64）可能溢出，iOS Safari 尤其明显
• 给 <td> 加该样式也能生效，但要注意 border-collapse: collapse 可能掩盖 padding 导致空格“看不见”，调试时建议临时加 border: 1px solid red
• 对 <span> 这类行内元素也生效，无需额外设 display: inline-block

为什么 <pre> 不是万能解

<pre> 本质是 white-space: pre 的快捷写法，自带等宽字体和 margin，语义上表示「预格式化文本」。

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

• 适合 ASCII 图、代码块、YAML/JSON 原样展示等真实需要像素级对齐的场景
• 不适合普通段落：强行套 <pre> 会引入字体、行高、外边距干扰，还得额外重置 font-family 和 margin
• 不能嵌套在 <p> 里——HTML 规范禁止块级标签出现在 <p> 内部，浏览器会自动闭合 <p>
• 若内容来自 CMS 或用户输入，记得对 、<code>>、& 做 HTML 实体转义，否则 <pre> 会把未闭合标签当真实 HTML 解析

真正难的不是让空格显示出来，而是判断该用   还是 white-space：静态文案里几个空格，  最稳；整段带缩进的文本，pre-wrap 更可持续；而用空格做对齐？那大概率是布局结构没理清，该换 padding 或 flex 了。