white-space: pre-wrap 是移动端最稳妥的空格处理方案，它保留空格和换行并支持自动折行；应避免滥用 ，优先使用 text-indent、padding、flex 或 grid 实现对齐。
连续空格被合并不是 bug，是 HTML 规范行为；解决的关键不是“加更多空格”，而是控制解析后文本的渲染方式或绕过默认空白折叠逻辑。
white-space: pre-wrap 是移动端最稳妥的选择
它在保留所有空格和换行的同时允许自动折行，避免内容溢出容器，比 pre 更实用，也比 pre-line 更可靠（后者会吞掉多余空格）。
- 适用场景：用户输入的带缩进/对齐的纯文本、日志片段、配置项展示
- 注意父容器不能设
text-overflow: ellipsis或overflow: hidden，否则可能截断内容；需配合word-break: break-word - iOS Safari 对长无空格字符串（如 base64）仍可能不折行，此时要加
word-break: break-all - 示例：
<div style="white-space: pre-wrap;">姓名： 李四</div>—— 这里的
别滥用 做对齐，优先用语义化布局
是不可断行空格，每个都算一个字符，大量使用会导致 HTML 体积膨胀、可访问性下降（屏幕阅读器可能逐个读出“不间断空格”），且在不同字体下宽度不一致。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 真正需要缩进时，用
text-indent（段首）或padding-left（整体左移） - 需要左右对齐（如标签+值），用
flex或grid，而不是堆 - 若必须用空格模拟等宽对齐（比如 ASCII 表格），应限定在
<pre class="brush:php;toolbar:false;"><code></code> 组合内，天然保留空白且语义正确</pre> - 来自 CMS 或用户输入的内容，插入前务必对
<code>>&做 HTML 实体转义，否则pre-wrap会把未闭合标签当真实 DOM 解析
textarea 和 contenteditable 的空格处理陷阱
用户在 textarea 里敲 5 个空格能看见，但一旦用 JS 取 value 再赋给 innerHTML，这些空格就全被合并了——因为 DOM 已经完成了空白折叠。
立即学习“前端免费学习笔记（深入）”；
- 安全做法：取
textarea.value后，用.replace(/\s/g, ' ')替换所有空白符为.replace(/[\t\n\r]/g, '\n').replace(/ /g, ' ') - 更干净的方案：直接把
textarea的value放进<pre class="brush:php;toolbar:false;"></pre>容器，不用 JS 中转 - 如果用
contenteditable，其内部空格行为接近普通编辑器，但输出 HTML 时仍需清洗，建议用textContent获取纯文本再走pre-wrap渲染路径
真正难的不是让空格显示出来，而是判断这个空格是否本该由结构承担——多数时候，你试图用空格解决的对齐或间隔问题，其实该交给 CSS 的 padding、gap 或 justify-content。
