浏览器默认折叠连续空格是HTML规范要求的“空白折叠”，需用 实体或white-space CSS属性实现多空格显示； 适合小范围语义化间距，white-space:pre-wrap最推荐用于整段文本格式保留。

浏览器默认把连续空格压成一个，这不是 bug，是 HTML 规范强制要求的「空白折叠」；想让多个空格真正显示出来，必须绕过这个规则——核心就两条：用   硬塞，或用 white-space CSS 属性接管解析逻辑。

为什么直接敲空格键没用

HTML 解析器在渲染前就把所有连续空白（空格、制表符、换行）合并为单个空格，这个过程发生在 DOM 构建阶段，和后续 CSS 无关。哪怕你写 hello<space><space><space>world，最终也只显示 hello world。

•   是唯一能保证“这里一定有一个可见空格”的实体； （ASCII 空格数字实体）和普通空格一样会被折叠，完全无效
• 全角空格（U+3000）虽能显示多个，但语义混乱、中英文混排时宽度不一致，字体兼容性差，不推荐
• 在 React / Vue 模板里动态插入时，得用 innerHTML 赋值；textContent 会把   当纯文本显示，不解析

用   实现可控空格

适合小范围、语义明确的间距控制，比如单位前、标题词间、防止换行断裂的场景（如 10 kg、© 2026）。

• 写法必须是  （注意 & 是 & 的实体，漏掉分号或写成 &nbsp 都无效）
• 要三个空格？写    ；不要写成      （中间的普通空格仍会被折叠）
• 别嵌套使用，比如     就写三遍，别写成    
• 静态文本中建议控制在 1–4 个以内；超过建议换方案，否则 HTML 可读性骤降，也违背语义化原则

用 white-space CSS 属性批量控制

这是更现代、更灵活的方式，尤其适合整段文本保留格式（如代码块、诗歌、对齐文本），避免一堆   污染 HTML 结构。

Article To Html

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

下载

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

• white-space: pre：完全保留空格和换行，但不自动换行 → 超宽内容会溢出容器
• white-space: pre-wrap：保留空格和换行，且允许自动换行 → 日常最推荐，兼顾可读性与响应式
• white-space: pre-line：合并连续空格，只保留换行 → 不满足“连续空格”需求
• 别给整个 <body> 或长列表加 white-space: pre，会导致文本无法折行，破坏响应式布局

<pre> 标签不是万能占位符

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

• 适合代码片段、日志输出、ASCII 艺术等真正需要「原样复刻」的场景
• 如果只是想让普通段落多几个空格，强行套 <pre> 会引入样式干扰，得额外重置 font-family、margin 等
• 它不能嵌套在 <p> 里——HTML 规范禁止块级标签嵌套在 <p> 中
• 内容来自用户或外部接口时，<pre> 内若含 <、> 等符号且未转义，会被直接解析为标签，导致结构错乱甚至 XSS 风险

真正容易被忽略的是上下文：静态 HTML 里用   最稳；动态生成内容时，white-space: pre-wrap + innerHTML 是更可持续的选择；而 <pre> 不是万能占位符，用错地方反而增加维护成本。