textarea默认保留连续空格和换行符，但显示效果受字体（推荐monospace）和目标元素white-space样式（如pre-wrap）影响；导出到非textarea元素时需用pre或设置white-space:pre-wrap防止塌陷。
textarea 默认就保留连续空格，但显示效果受 CSS 影响
直接在 textarea 里敲多个空格、Tab 或换行，值本身是完整保留的——这是它的默认行为，不需要额外设置。但用户看到的「是否显示为多个空格」，取决于渲染时的字体和样式。比如等宽字体下空格宽度一致，而比例字体（如 sans-serif）中空格可能被压缩或视觉不齐。
常见错误现象：
• 在 textarea 中输入了四个空格，但看起来像两个；
• 设置了 font-family: "Segoe UI" 后缩进错乱；
• 用 JavaScript 读取 value 没问题，但用 textContent 或 innerHTML 渲染到别处时又塌陷了。
- 确保使用等宽字体：加
style="font-family: monospace;"或Consolas, "Courier New", monospace - 避免意外覆盖 white-space：不要给
textarea设white-space: normal（它本来就不需要） - 如果内容要“导出显示”，别直接取
value塞进<p>—— 那里默认会折叠，得配合white-space: pre-wrap
从 textarea 读出的值粘贴到其他元素时，空格消失怎么办
这是最常踩的坑：你确认 textarea.value 里有三个空格，可一放进 <div> 就只剩一个。根本原因不是 textarea 没存好，而是目标元素没告诉浏览器“别动我的空白”。
使用场景：日志查看器、代码对比面板、用户提交的带缩进文本预览。
立即学习“前端免费学习笔记（深入）”；
- 最稳妥方案：把值塞进
<pre><code>...</code></pre>组合，天然保留所有空白 + 等宽 + 折行可控 - 轻量方案：用
<div style="white-space: pre-wrap;">${value}</div>，注意必须用pre-wrap，pre容易撑破容器 - 别用
<div>${value.replace(/ /g, ' ')}</div>——
textarea 内部显示异常：空格挤成一团或对不齐
这通常不是空格丢了，而是字体度量问题。比例字体（如 Arial、Helvetica）里，空格宽度 ≠ 字母宽度，且不同字号下缩放非线性，导致“四个空格”看起来像两个半。
参数差异注意点：
• monospace 下每个字符（包括空格）占等宽，适合对齐
• consolas 比 monospace 更紧凑，适合小字号编辑
• 不要用 font-family: system-ui，它在 iOS 上降级为 San Francisco，空格渲染不稳定
- 强制等宽：加
style="font-family: 'Fira Code', Consolas, monospace;" - 禁用字体平滑（仅限桌面端调试）：
style="-webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale;"，可减少抗锯齿带来的宽度抖动 - 别依赖空格做列对齐（如模拟表格），改用
<table>或 CSS Grid —— 空格对齐在不同设备上必然失效
Vue/React 中绑定 textarea 后空格异常
框架本身不破坏空格，但模板语法或响应式更新机制可能引入二次处理。例如 v-model 或 v-html 场景下，若原始字符串含未转义 HTML 符号（如 <），会被解析为标签而非文本。
性能影响很小，但容易忽略：
• v-model 绑定的 textarea 值始终准确，放心用
• 用 v-html 渲染到别处时，必须先 textContent 转义或用 DOMPurify 处理，否则 <pre> 标签可能被当成真实 HTML 解析
- 安全输出带空格文本：用
<pre>{{ rawText }}</pre>，不要用v-html直接插 - 需要高亮或富文本？改用
contenteditable+getSelection()控制，比硬塞空格靠谱 - 服务端返回 JSON 字段含缩进空格（如美化后的 JSON），前端直接
JSON.stringify(obj, null, 2)再塞进pre，别手动替换空格
