富文本导出多余空格源于HTML渲染规则与编辑器行为叠加，需前后端协同清理：前端用textContent或Delta提取纯文本并normalize()，后端用strip_tags()加正则压缩空白符（含零宽字符）再trim()。
富文本导出时的多余空格，本质是 HTML 渲染规则 + 编辑器行为叠加的结果，不能靠前端 CSS 单独解决，必须前后端协同清理。
为什么 white-space: pre-line 对导出内容无效
导出场景（如生成 PDF、保存为 TXT、API 返回纯文本）不走浏览器渲染流程，white-space 完全不起作用。你看到的“多余空格”，其实是原始 HTML 中残留的缩进、换行、制表符，或编辑器插入的不可见字符（如 ZWSP、 、全角空格 ），它们被原样保留在字符串里。
常见现象：
- 从 Quill/TinyMCE 导出的 HTML，
<p><span> 文本</span></p>开头有两个空格 - 粘贴自 Word 的段落，每行末尾带
\r\n，中间还有\t - 用
innerHTML直接取值后未调用normalize()，导致相邻空文本节点残留
PHP 后端清理：用 strip_tags() + 正则两步走
仅用 strip_tags() 不够——它只删标签，不碰空白。必须紧接着压缩空白序列：
立即学习“前端免费学习笔记（深入）”；
- 先调用
strip_tags($html)剥离所有标签 - 再用
preg_replace('/[\s\u{200B}-\u{200F}\u{FEFF}]+/u', ' ', $text)将所有空白符（含零宽字符、BOM、不间断空格）统一替换成单个空格 - 最后用
trim()去首尾空格
示例：
function cleanRichTextExport($html) {
$text = strip_tags($html);
$text = preg_replace('/[\s\x{200B}-\x{200F}\x{FEFF}]+/u', ' ', $text);
return trim($text);
}
注意：\s 在 UTF-8 下默认不含 Unicode 空白，必须显式补充常见零宽控制符范围。
前端导出前：别直接读 innerHTML，改用 textContent 或 getSemanticHTML()
innerHTML 会把编辑器自动补全的冗余标签、data- 属性、内联样式全拖出来，空格只是冰山一角。更安全的做法：
- Quill 用户优先调用
quill.getContents().ops转 Delta，再用Delta.insert()提取纯文本（保留换行逻辑） - TinyMCE 用户用
editor.getContent({ format: 'text' })，而非editor.getContent() - 原生
contenteditable区域，先克隆再normalize()，最后取textContent：const clone = el.cloneNode(true); clone.normalize(); return clone.textContent;
关键点：任何基于 DOM 的清理，都必须在节点对象上调用 normalize()，对字符串调用毫无意义。
导出为 PDF/文本时最容易忽略的细节
即使前后端都做了清理，导出环节仍可能引入新空格：
- Playwright/PDFKit 等工具默认按 HTML 渲染，若传入的是未处理的原始 HTML 字符串，
- 用
textContent提取后写入文件，若未指定 UTF-8 BOM 或换行符格式（\nvs\r\n），某些阅读器会显示异常缩进 - 导出 CSV 或 Excel 时，字段值若含首尾空格，Excel 会自动裁剪——但其他系统不会，造成数据不一致
最终输出前，务必用 json_encode() 或 var_export() 检查字符串真实内容，别信肉眼所见。
