html空格处理必须自动化介入构建流程，不能依赖人工补或反复调试white-space；需用html-minifier-terser开启collapsewhitespace与conservativecollapse: false配合，并谨慎配置ignorecustomfragments、守卫文本节点清洗、保护预格式化内容语义。
HTML空格处理不能靠人工补 或反复试 white-space，必须在构建流程中自动化介入——否则每次改模板、接 CMS 内容、拼接字符串，都得手动修空格，迟早出错。
用 html-minifier-terser 压缩时开启 collapseWhitespace
这是最常用也最容易踩坑的一环。单纯设 collapseWhitespace: true 不够，它只合并连续空白，但不会删掉块级元素间的换行符，导致 <div>\n <p>text</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img
src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a>
<p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>\n</div> 压缩后仍是 <div><p>text</p></div>（中间没空格），但若里面是 <span>one</span>\n<span>two</span>，那个换行仍会被渲染为一个空格。
- 必须搭配
conservativeCollapse: false，否则 inline 元素间换行照常产生间隙 -
ignoreCustomFragments别乱关——一旦误设，<pre class="brush:php;toolbar:false;"></pre>、<textarea></textarea>、<script></script>里的空白全被删，代码直接报错 - Webpack 中需通过
html-webpack-plugin的minify选项传入，不是插件本身自动生效
动态插入内容前用正则归一化文本节点
服务端返回的 HTML 片段、CMS 富文本、用户输入的 textarea 值，常带大量缩进和空行。直接 innerHTML 插入， 和换行都会原样保留，破坏布局。
- 对纯文本内容（如经
strip_tags()处理后的 PHP 输出），用preg_replace('/\s+/', ' ', $str)+trim()最稳妥 - 前端 DOM 操作时，遍历
childNodes（不是children），只处理nodeType === 3的文本节点 - 清洗逻辑必须加守卫：
if (!/\S/.test(text)) return，跳过纯换行/缩进生成的空文本节点，避免删掉<div>\n \n</div>中本该保留的结构占位
预格式化内容必须绕过自动化清理
<pre class="brush:php;toolbar:false;"></pre>、<code>、<textarea></textarea>、<script></script> 和 <style></style> 里的空白不是“冗余”，而是语义的一部分。html-minifier 默认跳过这些标签，但如果你用自定义正则或 Gulp 流程强行处理，就等于把 Python 缩进、CSS 注释、JS 模板字符串全毁了。
- 检查构建日志里有没有
Ignoring <pre class="brush:php;toolbar:false;"> content</pre>类提示，没有就说明配置漏了 - Vue / React 单文件组件中，
v-html绑定的字符串若来自未清洗的 CMS 字段，得在 JS 层先走一遍textContent.replace(/\s+/g, ' ').trim()，别指望构建工具代劳 - 哪怕用了
white-space: pre-wrap，也不能替代源码中对<pre class="brush:php;toolbar:false;"></pre>内容的保护——样式只管渲染，不保语法
真正难的从来不是“怎么加空格”，而是判断哪一段空白该留、哪一段该压、哪一段动了就崩。自动化不是一键开关，是每处空白都要有明确归属：是语义所需、排版所需，还是历史遗留。漏判一处， 就会出现在不该出现的地方，而 white-space: pre 又会卡死响应式换行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
