实现可控空格应据需求选择：文本内空隙用 或white-space属性，元素间距离用margin/padding； 最稳妥，white-space:pre-wrap推荐日常使用，CSS间距属性更利于维护。

浏览器会把连续空格压缩成一个，所以直接敲空格键没用——要实现可控空格，得靠  、

、white-space 或 CSS 间距属性，选哪种取决于你要控制的是「文本内空隙」还是「元素间距离」。

用   插入不可折叠的空格

这是最直白的办法，每个   渲染为一个固定宽度、不换行、不被合并的空格。适合词间微调或防断行（比如 “第 1 章” 不会被拆到两行）。

• 写法必须是  ，不是  （少个 & 会被当成普通字符显示）
• 需要 3 个空格？就写    ；别图省事复制粘贴全角空格，兼容性差且编辑器可能误判
• 它只影响文本流，不能用于 class 或 id 属性值里当分隔符（属性值中空格仍是分隔作用）
• 宽度约等于一个英文字符，在等宽/比例字体下都稳定； （半宽）、 （全宽）在老浏览器（如 IE8）里支持不全，慎用

用 white-space 保留原始空白

当你有一段含多个空格和换行的文本（比如代码片段、诗歌、对齐表格），又不想手动补一堆  ，就该上 white-space。它作用于整个容器，不是单个字符。

• white-space: pre;：原样保留所有空格、制表符、换行，但默认用等宽字体；想改字体得加 font-family
• white-space: pre-wrap;：推荐日常用——保留空格和换行，同时允许文本在容器边界自动折行
• white-space: pre-line;：合并连续空格，但保留换行；适合清理杂乱空格又想留换行的场景
• 别给
  

  财经HTML高端海报生成

  复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

  下载
  或
  直接设 pre，否则整段文字都变等宽、不折行，破坏阅读流

  用

  标签快速包裹格式化内容

  是 white-space: pre; 的 HTML 语法糖，适合临时处理一小段需要“所见即所得”的文本。

  • 写法简单：

    姓名：   张三

    ，里面混用   也行
  • 缺点明显：默认 font-family: monospace，若页面是无衬线字体，视觉割裂；需额外加 style="font-family: inherit;" 覆盖
  • 它会把制表符 \t 渲染为 8 字符宽，不是 4；想统一缩进，不如用 text-indent 或 padding
  • 不适合大段正文嵌套——语义上它表示“预格式化”，搜索引擎和读屏器会按代码块理解，影响可访问性

  用 letter-spacing 或 word-spacing 做视觉间距

  如果目标不是插入“空格字符”，而是让文字看起来更宽松，CSS 间距属性比堆   更干净、更易维护。

  • letter-spacing：调字符间距，对中英文都有效；letter-spacing: 2px; 比塞两个   更轻量，且响应式时可用 em 单位适配字号
  • word-spacing：专治英文单词间隔；对中文几乎无效（中文没空格分词），别指望它拉开汉字距离
  • 它们不生成真实空格，所以 innerText 取出来没额外空格，不影响文本分析或 SEO
  • 负值可用但要小心：letter-spacing: -1px; 可能导致文字粘连，尤其小字号下

  真正难的不是“怎么加空格”，而是判断该用字符级方案（  / white-space）还是布局级方案（margin / padding / text-indent）——前者改内容，后者改容器。混用时容易互相干扰，比如给一个 加了 letter-spacing，又在里面塞  ，结果间距翻倍还不好调试。

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