html默认在解析阶段合并连续空白符为单个空格，非bug而是规范行为；可用 实现不可换行空格，或用white-space:pre-wrap等css属性灵活控制渲染时的空白显示。

HTML默认会合并连续空格

浏览器渲染时，<span></span>、<a></a>、<strong></strong> 这类行内元素里的多个空格、换行、制表符，都会被压缩成一个空格。这不是 bug，是 HTML 规范行为 —— 你写 "hello   world"，实际显示就是 "hello world"。

用   替换空格最直接

在需要保留空格的位置，把普通空格替换成  （non-breaking space）：

<span>Name:    John</span>

这样能稳定显示四个空格宽度，且不会被换行断开。但注意：

•   是字符实体，不是 CSS 控制，无法用 font-size 单独缩放其宽度（它随字体等比缩放）
• 大量使用会让 HTML 可读性下降，维护成本升高
• 不适合动态内容（比如 JS 拼接字符串时要手动转义）

用 white-space CSS 属性更灵活

给行内元素加样式：white-space: pre; 或 white-space: pre-wrap;：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

<span style="white-space: pre-wrap;">ID:    12345</span>

关键区别：

• pre：保留空格和换行，不自动换行（文本超宽会溢出）
• pre-wrap：保留空格和换行，但允许自动换行（推荐日常使用）
• 该样式对子元素也生效，如果内部有 <em></em> 等嵌套，空格仍被保留
• 注意兼容性：white-space 在 IE9+ 和所有现代浏览器都支持

什么时候该用哪种方案

选   当：

• 只差一两个空格做对齐（比如表单标签后加两格）
• 内容完全静态、无需响应式或 JS 操作
• 不能改 CSS（如邮件模板、CMS 富文本输出限制）

选 white-space 当：

• 空格数量不固定（比如日志输出、代码片段）
• 需要响应式换行或配合 max-width
• 空格语义明确（如缩进、对齐列），而不仅是视觉装饰

别忘了：如果父容器用了 display: flex 或 text-align: justify，white-space 的表现可能被间接影响，得实测。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！