HTML中连续空格被压缩为一个空格是规范行为；可用 逐个替换、white-space CSS属性控制或<pre>标签解决，用户输入场景推荐white-space: pre-wrap。
为什么普通空格在HTML里不显示
HTML解析器会把连续的空白字符（空格、制表符、换行）全部压缩成单个空格，这是规范行为，不是bug。所以写<p>hello world</p>或直接敲三个空格，最终都只显示一个空格。
用 实体逐个替换空格
最直接的办法是用 （non-breaking space）代替每个需要保留的空格。它不会被浏览器合并，也不会换行。
示例：<p>姓名： 张三</p> 会在“：”后显示三个不可折行的空格。
- 适合固定、少量空格，比如对齐表单项标签
- 缺点是语义弱，可读性差，写多了难维护
- 注意不要混用
用white-space CSS属性控制整体空白处理
更灵活的方式是给容器加CSS：white-space: pre、pre-wrap或pre-line，让浏览器按源码格式渲染空白。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
常用组合：
-
white-space: pre— 保留所有空格和换行，但不自动换行（文字超宽会溢出） -
white-space: pre-wrap— 保留空格和换行，且允许自动换行（推荐大多数场景） -
white-space: pre-line— 合并连续空格，但保留换行（类似普通段落，只是换行生效）
示例：<p style="white-space: pre-wrap">地址： 北京市朝阳区</p>
用<pre>标签包裹内容
<pre>默认等价于white-space: pre，天然保留空格和换行，适合代码块、日志、ASCII图等场景。
- 优点是无需写CSS，语义明确
- 缺点是默认字体为等宽，有上下外边距，可能破坏原有排版节奏
- 可通过CSS重置：
<pre style="font-family: inherit; margin: 0; white-space: pre-wrap;">
真正容易忽略的是：当内容来自用户输入或API返回时，不能依赖 硬编码——得用white-space: pre-wrap配合innerText或转义后的文本，否则XSS风险和空格丢失会同时发生。
