HTML解析器默认折叠连续空格为单个空格，因规范要求空白折叠；用white-space:pre-wrap可保留原始空格和换行，配合innerHTML插入最可靠。
直接复制进 HTML 的连续空格（比如从代码编辑器、日志或 Word 里粘贴的多空格文本）默认会被浏览器折叠成一个——这不是复制失败，是 HTML 解析器在解析阶段就干掉了多余空白。
为什么复制的空格一粘就“消失”
HTML 规范要求解析器对所有文本节点执行「空白折叠」：把连续的空格、制表符、换行符统一压缩为单个空格。哪怕你复制的是 "a<space><space><space>b"，进 DOM 后变成 "a b"，渲染自然只剩一个空格。
这个过程发生在 JS 获取 textContent 或浏览器渲染前，和粘贴动作本身无关；也和字体、margin 无关，纯解析规则。
用 white-space: pre-wrap 批量接管粘贴内容
这是最实用、语义清晰的解法：不改 HTML 结构，只靠 CSS 告诉浏览器“别动我原文里的空格和换行”。
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
pre-wrap是首选：保留所有空格和换行，同时允许自动折行，响应式友好 - 别用
pre：长文本会溢出容器，尤其移动端容易水平滚动 - 避免给整个页面加：只作用于明确需要保留格式的容器，比如
<div class="log-output"> - 注意内联元素行为：如果容器里有
<span>或<a>，它们内部的换行也会被保留，可能意外破坏行高
示例：
<div style="white-space: pre-wrap; font-family: monospace;"> copy-pasted text with 4 spaces and a line break </div>
动态插入时，别用 textContent 覆盖原始空格
如果你用 JS 接收用户粘贴的内容（比如监听 paste 事件），再塞进 DOM，关键点在于写法：
- 用
element.innerHTML = e.clipboardData.getData('text/plain')→ 空格能保留（但需转义 HTML 特殊字符防 XSS） - 用
element.textContent = ...→ 空格全被二次折叠，白忙活 - React/Vue 中：别用插值
{text}直接渲染，要用v-html或dangerouslySetInnerHTML+ 配合white-space - 后端返回带缩进的字符串（如 JSON 日志），前端直接
innerHTML渲染比先split/join更可靠
别碰 堆砌方案
有人想把粘贴文本里的每个空格替换成 ，这在静态场景可行，但对复制来的动态内容极不现实：
- 正则替换易误伤：URL、邮箱、代码中的空格不该变
- 中英文混排时宽度不一致：
- 大量
- 它解决的是“插入可控空格”，不是“还原原始空白”，目标错位
真正要还原粘贴内容的原始空白结构，white-space: pre-wrap + innerHTML 是目前最轻量、兼容性最好、也最贴近语义的组合。复杂点在于：你得确认那个容器没被其他 CSS（比如 font-size: 0）悄悄吃掉空格——这种干扰常被忽略。
