HTML中连续空白字符默认被合并为单个空格，应优先使用white-space CSS属性（如pre-wrap）保留原始空白，而非滥用 或标签。
HTML中空格被合并的默认行为
浏览器默认会把连续的空白字符（空格、制表符、换行）压缩成单个空格，这是HTML规范定义的渲染规则，不是bug。所以直接写 或一堆普通空格，视觉上都只显示一个空格。
用 手动替换空格
适用于少量、静态、语义上确实需要“不可断行空格”的场景，比如单位和数字之间：100 px、Mr. Smith。注意： 是不换行空格，它不会被合并，但也不能用它排版对齐或模拟缩进。
- 不能用多个
-
letter-spacing - 可读性差：源码里一堆
用 white-space CSS 控制整块文本
这才是处理连续空格的正解，尤其适合日志输出、代码片段、ASCII图表等需保留原始空白的场景。常用值：
-
white-space: pre—— 保留空格和换行，但不自动换行（文本溢出容器） -
white-space: pre-wrap—— 保留空格和换行，且允许自动换行（最常用） -
white-space: pre-line—— 合并连续空格，但保留换行（适合纯换行需求）
示例：
<div style="white-space: pre-wrap"> hello world</div>会原样显示两个前导空格和四个中间空格。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
用 <pre class="brush:php;toolbar:false;"></pre> 标签快速启用预格式化
<pre class="brush:php;toolbar:false;"></pre> 默认等价于 white-space: pre，适合小段固定内容。但它自带上下外边距和等宽字体，可能破坏原有样式流。
- 如果不想继承等宽字体，加
font-family: inherit - 如果要支持换行，得手动覆盖为
white-space: pre-wrap - 不要用
<pre class="brush:php;toolbar:false;"></pre>包动态生成的富文本——它会把 HTML 标签当纯文本显示，存在 XSS 风险
真正需要保留空格时，优先选 CSS 的 white-space，而不是靠标签语义硬套。很多人卡在以为必须用 <pre class="brush:php;toolbar:false;"></pre> 或堆 ，其实一行 CSS 就能解决，而且更可控、更易维护。
