浏览器默认对HTML空白字符进行折叠，连续空格只显示一个；需用 、CSS或white-space属性实现多空格效果。

为什么 <li> 里敲多个空格只显示一个

浏览器默认对所有 HTML 元素（包括 <li>）做空白折叠（whitespace collapsing）：连续的空格、制表符、换行符全被压缩成单个空格，首尾空白也被丢弃。这不是 bug，是 HTML 规范行为——目的是让代码缩进不影响渲染。

在 <li> 文本中插入多个可见空格的正确方式

直接在 <li> 标签内敲空格键无效；必须用显式手段“固化”空格：

• 用   实体：每个   渲染为一个不可断行、不被折叠的空格。例如：<li>左   右</li> 显示为“左 右”（三个空格）
• 避免用   或   做列表项内间距——它们语义是排版单位（2/4 字符宽），在不同字体或缩放下宽度不一致
• 若空格用于对齐（如表格感布局），优先考虑 CSS 的 text-align、padding 或 grid，而非堆  

<li> 之间加空格的推荐做法

别在 <li> 标签之间硬塞  ，既难维护又破坏语义。真正干净的做法是用 CSS 控制间距：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 给 <li> 设 margin-right（水平排列时）或 margin-bottom（垂直时）
• 如果需要紧凑水平排列且自动换行，把 <li> 设为 display: inline，再配合 li::after { content: "\00a0 "; } 插入不间断空格
• 用 white-space: pre-wrap 包裹整个 <ul></ul> 也能保留内部空格，但会同时保留换行和缩进，容易意外影响布局

JavaScript 动态插入空格时的常见坑

用 JS 修改 <li> 内容时，空格行为和 HTML 源码不一致：

立即学习“前端免费学习笔记（深入）”；

• element.textContent = 'a' + ' '.repeat(3) + 'b' → 页面仍只显示一个空格（textContent 不解析 HTML 实体）
• 改用 element.innerHTML = 'a' + ' '.repeat(3) + 'b' 才生效
• 拼接字符串时漏写分号或误写成 &nbsp（缺分号）会导致实体不被识别，变成纯文本 &nbsp

实际项目中，多数所谓“需要多个空格”的场景，本质是视觉对齐或间距控制问题。用 CSS 解决比堆   更稳定，也更容易响应式适配。只有极少数需精确字符级空格（比如模拟终端输出、ASCII art）才该用   或 white-space: pre。