浏览器默认合并空格，需用 、white-space属性或等正确方法控制； 语义为防断词，非多空格快捷键；white-space: pre-wrap最常用，兼顾保留格式与折行。

直接敲空格键永远只能得到一个空格——这是浏览器默认行为，不是你代码写错了，而是 HTML 规范如此。想控制空格数量、保留换行、对齐文字或防止断行，得用对方法，而不是堆  。

为什么   常用但容易翻车

  是不换行空格（non-breaking space），语义是“这里必须有且仅有一个空格，前后词不能拆开”。它不是“多打几个空格”的快捷键。

• 适合场景：Mr. Smith、¥ 100、表格中空  
• 不适合场景：给标题加左右间距（该用 padding）、模拟段落缩进（该用 text-indent）、对齐按钮内文字（该用 flex 或 grid）
• 常见错误：&nbps;（拼错）、&nbsp（缺分号）、复制时混入零宽空格（如 ​），结果原样输出字符串而非空格
• 性能无影响，但堆十个            会让 HTML 膨胀、可维护性骤降

white-space 属性才是空格控制的核心开关

white-space 决定浏览器怎么解析文本里的空格、制表符和换行符。它比一堆   更干净、更可控。

• white-space: normal：默认值，合并连续空格，丢首尾空白，允许折行
• white-space: nowrap：合并空格，但禁止折行（整段挤在一行）
• white-space: pre：完全保留源码空格和换行，等宽字体，默认不折行
• white-space: pre-wrap：最常用——保留空格和换行，同时允许自动折行
• white-space: pre-line：合并连续空格，但保留换行符（适合日志、诗歌）

示例：

姓名: 张三

DeepBI DHTML 页面生成器

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

下载

，四个空格会如实显示，且内容仍能响应式折行。

什么时候该用

标签

本质是 white-space: pre 的语义化封装，适合需要完整保留格式的纯文本场景。

• 代码块、终端日志、ASCII 图、诗歌排版——直接套
  最省事
• 别用它来“做布局”：比如为了对齐两行文字硬塞

  标题      副标题

  ，这破坏语义，后期改样式极难
• 若需自定义字体或折行，加 CSS 覆盖：

• 动态内容（如从 读取）不能直接 innerHTML = text，否则空格丢失；应设容器 white-space: pre-wrap，再用 textContent 赋值

表格空单元格占位别踩坑

空 在 border-collapse: collapse 下可能塌陷：边框消失、高度归零、点击区域失效。

• 轻量解法：每个空单元格只塞一个  ，即  ，足够撑开结构
• 别堆砌多个  ，既无必要也难维护
• 整行为空？优先用 min-height 控制行高，而不是每个 都填  
• 导出 Excel 时   会变成真实空格，干扰数据清洗；此时更适合用空字符串 + empty-cells: show 配合边框

真正难的不是“怎么打出空格”，而是判断“这个空格到底属于内容语义、视觉排版，还是数据占位”——选错方案，后面调试半小时不如开头想清楚这一步。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！