html中连续空格被折叠为单个空格是规范行为；推荐对动态内容使用white-space: pre-wrap配合textcontent，禁用innerhtml直接插入未转义内容。
为什么直接写多个空格在HTML里不显示
浏览器解析HTML时会执行「空白折叠」：所有连续的空格、制表符、换行符都被压缩成单个空格，这是HTML规范行为，不是bug。你写hello world，最终渲染效果等同于hello world。这个过程发生在DOM构建前，和CSS、字体、JS都无关。
用white-space: pre-wrap最稳妥处理动态内容
这是当前项目中最推荐的方案，尤其适合用户输入、API返回或模板渲染的含空格文本。
- 它保留原始空格、制表符和换行符，同时允许自动折行，不会撑破容器
- 必须作用于块级或行内块元素；若目标是
<span></span>这类默认inline元素，需加display: inline-block或确保父容器已设该样式 - 不要只靠
innerHTML = str.replace(/ /g, ' ')——既破坏原始字符串语义（比如" a ".trim()失效），又可能引入XSS风险 - 正确做法：
el.style.whiteSpace = 'pre-wrap'; el.textContent = rawString;
只适合静态、少量、语义明确的空格
每个 渲染为一个不可折叠、不可换行的空格，但它不是“空格增强补丁”，而是独立字符实体。
- 写三个空格就得手敲三遍
- 漏掉分号（如
 ）会被当纯文本，浏览器不解析 - 在React/Vue中用
v-html或dangerouslySetInnerHTML插入时，若未转义， - 别用它做段落缩进或对齐——语义错误、响应式错乱、屏幕阅读器体验差
<pre class="brush:php;toolbar:false;"></pre>不是万能占位符，用错反而添麻烦
<pre class="brush:php;toolbar:false;"></pre>本质是white-space: pre + font-family: monospace的快捷写法，仅适用于真正需要「像素级复刻」的场景。
- 它默认禁用自动换行，长文本会水平溢出；若需折行，得显式覆盖为
white-space: pre-wrap - 中文下
monospace字体常发虚、字号偏小，必须重置font-family - 禁止嵌套在
<p></p>里——HTML规范不允许块级标签出现在<p></p>内部 - 内容含
<code>>等符号却未转义？直接被解析为标签，结构崩塌
真正容易被忽略的是上下文匹配：静态示例代码用<pre class="brush:php;toolbar:false;"></pre>最快；但用户评论、日志输出、表单反馈这类动态内容，div + white-space: pre-wrap + textContent才是可持续解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
