html中连续空格会被浏览器合并为一个，需用 实体或white-space css属性控制： 用于少量空格，white-space:pre-wrap适合大段保留空白文本。
HTML里普通空格会被自动合并
浏览器默认把连续空格、换行、制表符都当成一个空格处理，所以直接敲多个空格键没用。这不是bug，是HTML规范行为——white-space 默认值为 normal，会折叠空白符。
用 实体逐个插入不间断空格
最常用也最可控的方式：用 HTML 实体 代替空格。每个 渲染为一个不可折行的空格，且不会被合并。
比如想显示「a____b」（中间4个空格）：<p>a b</p>
注意： 是字符实体，必须带分号，写成   无效；也不能用中文全角空格替代。
用 CSS 的 white-space 属性批量控制
适合整块文本需要保留原始空白格式的场景，比如代码片段、诗歌排版：
-
white-space: pre—— 保留空格和换行，但不自动换行（文字超出容器也不折行） -
white-space: pre-wrap—— 保留空格和换行，同时允许自动换行（日常最推荐） -
white-space: pre-line—— 合并多余空格，但保留换行符
示例：<p style="white-space: pre-wrap">hello world</p> → 显示为「hello world」（4个空格可见）
用 <pre class="brush:php;toolbar:false;"></pre> 标签包裹纯文本内容
<pre class="brush:php;toolbar:false;"></pre> 默认启用 white-space: pre，适合展示日志、缩进代码等对空格敏感的内容。
但要注意：
- <pre class="brush:php;toolbar:false;"></pre> 会应用浏览器默认的等宽字体和上下外边距
- 它不会自动处理 HTML 标签，里面写 <strong></strong> 不会加粗，除非配合 innerHTML 或服务端渲染
- 如果只是想保留空格，又不想改字体/样式，优先选 CSS 方案而非 <pre class="brush:php;toolbar:false;"></pre>
实际项目中，简单补两三个空格用 最省事；大段含空格文本用 white-space: pre-wrap 更灵活；别为了省事在代码里混用全角空格或多次敲空格键——那只会让你在审查元素时反复怀疑自己键盘坏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
