浏览器默认压缩连续空格为一个空格，这是HTML规范的“空白折叠”行为；可用 插入不可折行空格，或用标签/CSS white-space: pre保留原始格式。

直接敲空格为什么没用

因为浏览器默认会把连续的  、\t、\n 甚至多个 （普通空格）全部压缩成一个空格——这不是 bug，是 HTML 规范明确规定的「空白折叠」行为。你在源码里写 This    is 或换三行再加四个空格，最终渲染出来还是 This is。

用   插入不可折行空格

这是最常用也最稳妥的方案，尤其适合单词间、数字与单位之间等不能断行的场景：

•   是 HTML 实体，代表「不换行空格」，浏览器不会压缩它，也不会在行尾自动换行
• 要显示 4 个空格，就写 4 次：This    is
• 注意：必须小写，且末尾分号 ; 绝对不能省略，写成 &nbsp 或   都无效
• 缺点是语义弱，大量使用会影响可读性和 SEO，仅建议用于必要位置（如「¥ 199」、「Mr. Smith」）

用

或 white-space: pre 保留原始格式

当你需要整段文本严格按源码缩进、换行、空格呈现（比如代码块、诗歌、ASCII 图），就该用这个路径：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• This  is  a  test

  ：标签内所有空格、制表符、换行都会原样输出
• CSS 方式更灵活：

  This  is  a  test

• 其他常用值：pre-wrap（保留空格和换行，但允许自动换行）、pre-line（合并空格，只保留换行）
• 注意：white-space: pre 会让文本失去自动换行能力，长内容可能溢出容器，需配合 overflow 或 max-width 控制

别踩这些坑

实际写 HTML 时，这几个点最容易出错：

• 把   写成 &nbsp（缺分号）或  （那是中文全角空格实体，宽度不同且不通用）
• 误以为      能“隔离”空格——其实只要前后是行内元素，空格仍可能被折叠或影响布局
• 用 letter-spacing 或 word-spacing 模拟空格，结果发现它作用于所有字符/单词，无法精准控制某两个字之间的间距
• 在 或 contenteditable 区域里直接粘贴带空格的文本，却忘了服务端或 JS 处理时又做了 trim

空格看似简单，但它的行为由 HTML 解析、CSS 渲染、DOM 操作三层共同决定。真正要「规范处理」，得先想清楚：你要的是语义准确、视觉可控，还是格式完全冻结——选错路径，后面调样式或改结构都会越来越拧巴。

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