浏览器默认合并连续空白符是HTML规范行为，需用 、white-space属性或pre标签等正确方法控制空格显示，避免滥用 影响可维护性。

浏览器默认会把连续空格、制表符、换行符全合并成一个空格，这不是 bug，是 HTML 规范行为。想让多个空格显示出来，不能靠狂敲空格键，得用对方法。

为什么直接敲空格没用

HTML 解析器在构建 DOM 时，会对文本节点里的空白字符做“折叠”：连续的 、\t、\n 全部压缩为单个空格；首尾空白则直接丢弃。所以

hello   world

和

hello world

渲染效果一样——除非你用了   或其他实体。

• 常见错误现象：写了一串七八个空格，预览后还是一个；复制别人代码里的空格，粘贴后失效（实际混入了零宽字符）
• 真实场景中，这种折叠只发生在“文本内容内”，不影响元素间的空白（比如两个 之间的空格仍会渲染为一个间隙）
• 性能上毫无影响，但滥用   会让 HTML 膨胀、可维护性下降

什么时候该用  ，什么时候不该用

  是不换行空格，语义是“这里必须有一个空格，且前后词不能断行”。它不是“多加几个空格”的快捷键。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 适合场景：防止“¥100”被拆成两行、“Mr. Smith”中间断开、表格中空单元格占位（ ）
• 不适合场景：给标题文字加间距（该用 letter-spacing）、对齐按钮文字（该用 padding）、模拟缩进（该用 text-indent 或 CSS 网格）
• 容易踩的坑：&nbps;（拼错）、&nbsp（缺分号）、复制时带隐藏 Unicode 字符（如 ​），都会原样输出字符串

保留多空格+换行的可靠方案

需要完整保留源码格式（比如代码块、日志、诗歌排版），  不够用，得升维处理。

• 最简单：内部所有空白原样保留，但默认等宽字体、不自动换行；可用 CSS 覆盖 font-family 和 white-space
• CSS 的 white-space 属性更灵活：pre-wrap 保留空格和换行，同时允许自动折行；pre-line 只保留换行，合并多余空格；nowrap 合并空格但禁止折行
• 动态内容（如从 textarea 读取）要保留空格，不能直接赋值 innerHTML，得先用 .replace(/ /g, ' ') 或设容器 white-space: pre-wrap

表格空单元格怎么占位才不翻车

空 在 border-collapse: collapse 下可能塌陷，边框消失、高度归零。最轻量解法就是塞一个  。

• 写   即可，一个足够，别堆砌多个
• 别和 white-space: pre 混用——表格不是文本容器，会导致单元格内意外缩进或换行
• 如果整行都空，优先用 min-height 控制行高，而不是每个 都塞  
• 导出 Excel 时   会变成真实空格，干扰数据清洗；此时更适合用空字符串 + CSS empty-cells: show 配合 border-collapse: separate

空格问题本质是内容语义和样式控制的边界问题。  是内容层补丁，white-space 和 letter-spacing 才是样式层正解。多数“想多加空格”的需求，其实该交给 CSS 处理，而不是在 HTML 里堆实体。

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