HTML默认折叠连续空白字符，刷新后空格“消失”实为解析时的正常折叠；需用 或white-space: pre-wrap等方案保留空格。

刷新后连续空格消失，是因为HTML默认折叠空白

页面刷新本身不会“清除”空格，但浏览器每次重新解析HTML时，都会严格执行空白折叠（whitespace collapsing）规则：所有连续的 以外的普通空格、制表符、换行符，一律合并为一个空格。所以你看到的“刷新后没了”，其实是代码里写的普通空格被反复折叠的结果，不是刷新导致的bug。

用   替代普通空格才能稳定保留

只有 （non-breaking space）是HTML标准中明确不参与折叠的空白字符。它在DOM中是独立文本节点，刷新、重绘、甚至JS动态插入都不会被合并。

• 写三个空格？用   ，不是敲三次空格键
•  不能写在属性值里起作用，比如title="a  b"中的 会被当作普通字符解析，但不会渲染为可见空格（部分浏览器可能忽略）
• 避免混用：  （ 加一个普通空格）仍会折叠掉后面的普通空格，只剩一个 

white-space: pre-wrap 是更灵活的全局方案

如果需要保留整段文本里的空格+换行+自动折行（比如用户输入的日志、代码片段、诗歌），直接给容器加CSS比堆 更可靠：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

<p style="white-space: pre-wrap">  这里有  两个缩进    和换行</p>

• pre-wrap保留所有空白和换行，且内容超宽时自动换行，适合大多数场景
• pre也保留空白，但不换行，容易撑破容器造成横向滚动
• 该样式在刷新后依然生效，因为它是CSS规则，不是依赖HTML源码中的字符

别用全角空格或 / 做对齐

全角空格（`　`）、 、 虽然能显示多个，但它们本质是“字符”，宽度固定且不可继承字体度量，容易在不同字体/缩放下错位。

立即学习“前端免费学习笔记（深入）”；

• 用于语义性分隔（如“姓名：　张三”）可以，但别用来模拟缩进或表格对齐
• 真正需要缩进，请用text-indent；需要间距，请用margin或padding
• 用户粘贴内容时，全角空格常被编辑器自动转成普通空格，导致回退到折叠状态

复杂点在于：同一段文本里混合使用 和white-space可能互相干扰——比如容器设了pre-wrap，里面再塞一堆 ，空格数会翻倍。实际用时选一种主策略，别叠加工具。