HTML中连续空格失效是因浏览器默认合并空白字符； 为不换行空格， 约2字符宽， 约4字符宽；推荐用white-space: pre-wrap等CSS控制，或标签处理整段原样文本。
HTML里加空格为什么经常失效
因为浏览器默认会把连续的空白字符（空格、换行、制表符）合并成一个空格，这是 HTML 规范行为，不是 bug。你敲了 10 个 或写了 5 行缩进，最终页面很可能只显示一个空格。
和 、 的区别在哪
它们都是 HTML 实体，但宽度和语义不同：
-
-
-
注意： 和 在老版本 IE 中支持不完整，如果要兼容 IE11 及以下，优先用 叠加或 CSS。
用 CSS white-space 控制空白更可靠
比起堆实体，直接告诉浏览器“别吃掉我的空格”更干净，尤其适合代码块、日志、缩进文本：
立即学习“前端免费学习笔记（深入）”；
-
white-space: pre—— 保留空格和换行，但不自动换行（类似<pre class="brush:php;toolbar:false;"></pre>） -
white-space: pre-wrap—— 保留空格和换行，且允许折行（最常用） -
white-space: pre-line—— 合并空格，但保留换行
示例：<div style="white-space: pre-wrap"> hello world</div> 会显示两个前导空格和中间多个空格。
什么时候该用 <pre class="brush:php;toolbar:false;"></pre> 标签
当你有一整段需要原样渲染的文本（如错误日志、JSON 片段、命令行输出），<pre class="brush:php;toolbar:false;"></pre> 是最省心的选择：
- 它默认启用
white-space: pre - 自带等宽字体，语义清晰
- 配合
overflow-x: auto能轻松实现横向滚动
注意：不要为了加几个空格就套 <pre class="brush:php;toolbar:false;"></pre>，它会影响字体、行高和语义，纯内容排版建议走 CSS。
真正难的是在响应式布局里兼顾空格控制和换行逻辑——pre-wrap 看似简单，但遇到中英文混排或 emoji 时，不同浏览器对“可断行位置”的判断仍有差异。
