浏览器默认合并连续空白符是HTML规范行为；解决需用 实体或white-space CSS属性，前者防折行适用于数字单位等场景，后者如pre-wrap适合保留格式的文本。
直接敲空格键为什么没用
浏览器默认会把连续的普通空格、换行符、制表符（\t）、回车（\r）全部合并成一个空格。哪怕你在源码里敲了10个空格，最终渲染出来还是一个——这不是 bug，是 HTML 规范行为。
所以“快速处理”的第一步，是放弃靠空格键堆砌的想法。真正起效的只有两类手段： 实体，或 white-space CSS 属性。
是什么，怎么用才不翻车
是 non-breaking space 的缩写，它是个真实字符，不会被折叠，也不会在行尾断开。但它不是“万能空格”，用错地方反而埋坑：
- 必须写成
& n b s p ;（中间有空格）或 （漏分号）都会原样显示文字，而不是空格 - 在属性值里用，比如
title="张 三"，得注意单引号/双引号是否包裹了未转义的&；服务端模板（如 EJS、Jinja）可能自动转义，需查文档确认如何输出原始实体 - 别把它当布局工具：用 5 个
margin/padding或 flex - 适合场景：数字和单位之间（
100 px）、人名中间防折行（欧阳 修）、表格中临时补位
什么时候该换 white-space 而不是塞
如果你要保留一整段含多个空格、缩进、换行的文本（比如代码块、日志、诗歌），一个个写 效率低且难维护。这时用 CSS 更干净：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
-
white-space: pre;：完全保留所有空白和换行，行为像<pre class="brush:php;toolbar:false;"></pre>标签，适合纯文本展示 -
white-space: pre-wrap;：保留空格和换行，但允许长单词自动换行，日常最稳妥的选择 -
white-space: pre-line;：合并连续空格，但保留换行符，适合带段落的富文本 - 注意：
white-space作用于整个元素，会影响所有子内容；不要给按钮或链接加这个，可能导致文字无法换行或点击区域异常
全角空格 和半角空格 别乱用
（全角）≈ 1 个中文宽度， （半角）≈ 0.5 个中文宽度。它们语义是“宽度”，不是“空格行为”：
- 不同字体下实际像素宽度浮动明显，尤其在 iOS Safari 或小字号场景下容易失准
- 它们仍受父级
white-space: normal影响，可能被折叠或意外换行 - 可读性差：别人看代码时，
姓名： 张三不如姓名：<span style="margin-left: 1em">张三</span>直观 - 真需要固定宽度，用
ch单位（如margin-left: 2ch）或inline-block+width更可靠
真正难的不是选哪个符号，而是意识到：大多数“空格问题”本质是布局逻辑没理清。填进去的间隙，字体一换、屏幕一缩，就没了。先问自己一句——这里到底需不需要“空”，再决定用什么填。
