html中空格“不生效”是浏览器按规范将连续空白符折叠为单个空格的默认行为，并非bug；解决需分层处理：内容层用 、样式层用white-space: pre-wrap、结构层用flex/grid或注释隔断。
HTML模板里空格“不生效”，不是你写错了，是浏览器按规范把连续空格、换行、制表符全合并成一个空格——这是默认行为，不是bug。
为什么直接敲空格在模板里没用
模板（比如 Handlebars、EJS、Vue SFC 或纯 HTML 文件）中写的 <p>姓名： 张三</p>，渲染出来永远是“姓名： 张三”。因为 HTML 解析器在构建 DOM 前就做了空白折叠：所有连续的 \s+（空格、\t、\n）被压成单个空格，首尾还被砍掉。
常见错误现象：
- 在 Vue 模板里写
<span>状态：{{ status }}</span>，想靠空格对齐，结果status一变，对齐就崩 - EJS 中
<div>yes</div>，前后空格导致布局多出不可控间隙 - Handlebars 的
{{#each}}循环里每项后加空格，结果只显示一个
用 还是 white-space: pre-wrap
二者适用场景完全不同，混用反而更难维护。
-
Mr. Smith被折行 -
white-space: pre-wrap是样式层控制：作用于整个容器，保留所有源码空格+换行，同时允许自动换行。适合展示用户输入、日志、配置片段等 - 别用
pre-wrap只为塞两个空格——过度设计 - 在模板引擎中，如果变量插值后需要保留空格，优先在 JS 层处理（如
str.replace(/\s+/g, ' ')），而不是靠 HTML 实体硬凑
模板中 inline 元素间的空格怎么消失
这不是空格“被吃掉”，而是 HTML 规范把标签间的换行和空格解析为一个文本节点，再参与渲染流。例如：
<div> <span>A</span> <span>B</span> </div>
其中换行+缩进会变成一个空格，导致 A 和 B 之间有间隙。解决方法取决于你是否需要语义化结构：
- 删换行：写成
<span>A</span><span>B</span>—— 简单直接，但牺牲可读性 - CSS 清除：父容器加
font-size: 0;，子元素重设font-size—— 安全，但要注意继承链 - 注释隔断：写成
<span>A</span><!-- --><span>B</span>—— 零副作用，推荐用于条件渲染区块间 - 改 display：子元素设
display: flex或display: grid，天然无视文本节点空格 —— 现代布局首选
textarea 和预渲染内容的空格陷阱
模板里输出 <textarea>{{ rawText }}</textarea> 时，rawText 中的空格能原样保留——因为 textarea 不走 HTML 解析流程。但一旦你用 JS 把它的值取出来再塞进 <div>，立刻又被折叠。<ul>
<li>从 <code>textarea.value 读取后，不要直接赋给 innerHTML；改用 textContent + CSS white-space: pre-wrap 组合
String.prototype.replace(/\s+/g, ' ') 标准化，比前端补救更可靠v-html 或 dangerouslySetInnerHTML 不会恢复空格，必须提前转义或包裹 <pre class="brush:php;toolbar:false;"></pre>
pre、code、script、style 标签内的空格都必须原样保留——压缩工具（如 html-minifier）默认跳过它们，手动清理时务必绕开真正麻烦的从来不是“怎么加空格”，而是“谁在什么时候、以什么粒度动了这些空格”——模板引擎、CSS 渲染、JS 操作、服务端清洗，四层叠加下来，一个空格可能被处理三次。盯住数据源头，比在 DOM 层打补丁更省力。
