空白折叠是HTML规范定义的行为，浏览器在DOM解析阶段将文本节点内连续空白（空格、\t、\n）首尾丢弃、中间压缩为单个空格；仅、等预格式化上下文保留原始空白，该过程不可逆。
HTML里敲多个空格、换行、制表符，最终只显示一个空格——这不是bug，是规范定义的“空白折叠”行为。想控制它，得理解折叠发生的阶段和上下文，而不是靠狂敲空格或堆 。
什么是空白折叠？浏览器到底做了什么
HTML解析器在构建DOM时，对文本节点内的连续空白字符（空格、\t、\n）执行两步处理：
- 首尾空白直接丢弃
- 中间连续空白压缩为单个空格
所以 hello world hello world、<script></script>、等预格式化上下文。
不是“让空格不折叠”的开关，而是语义切换：它告诉浏览器“这段内容是预格式化的”，于是解析器跳过空白折叠，并默认应用white-space: pre CSS规则。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 适合场景：代码块、日志输出、ASCII图、配置文件片段
- 不适合场景：仅为了给段落首行缩进、按钮文字对齐、响应式布局留空
- 长行会撑破容器？加
white-space: pre-wrap即可支持自动换行 - SEO和读屏器会照读所有空格换行，含敏感信息（如密钥缩进）要谨慎
两个
这不是“空格”，而是标签间换行/缩进产生的文本节点，被折叠后仍保留一个空格。这个空格的视觉宽度由父元素的font-size决定。
- 常见现象：
A\nB渲染出A和B之间有间隙 - 错误解法：用
AB硬写在一行（牺牲可读性） - 合理解法：
- 父容器设
font-size: 0，子元素单独设font-size - 用
display: flex或float消除间隙 - 用
letter-spacing或margin替代空白做间距控制
- 父容器设
该用在哪儿，不该用在哪儿
是不换行空格（non-breaking space），语义是“此处必须有一个空格，且前后文字不能断行”，不是“多加几个空格”的快捷键。
- 合适场景：
Mr. Smith（防止姓和名被折到两行）、¥ 100（防止货币符号与数字断开）、表格空单元格占位 - 不合适场景：用十几个
- 兼容性坑：
- 复制粘贴风险：混入零宽字符（如
）会导致空格“看起来存在却不可见”
真正难处理的从来不是“怎么让空格显示出来”，而是“怎么让开发者意识到：空格是内容语义的一部分，而间距是样式职责——把它们混在一起，问题只会从HTML蔓延到CSS再到JS。”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
