white-space属性才是控制空格渲染的核心，其中pre-wrap最常用，可保留空格与换行并支持自动折行；需显式设置css而非仅依赖等宽字体或html结构。
为什么 不能批量替代普通空格
直接用 手动替换每个空格，看似能保留空白，但实际会破坏文本可访问性、复制粘贴行为和响应式排版。屏幕阅读器可能把一串 读成“不间断空格 不间断空格……”，用户复制内容时也会带上大量不可见字符。
真正需要的是让浏览器按源码中的空格、缩进、换行原样渲染，而不是靠实体字符硬塞。
white-space 的四个关键取值区别
CSS 的 white-space 属性才是控制空格渲染逻辑的核心。不同取值对空格、制表符、换行的处理完全不同：
-
normal：合并连续空格，忽略换行，这是默认行为 -
nowrap：合并空格，但强制不换行（适合单行截断场景） -
pre：完全保留空格、制表符和换行，但不自动换行（类似<pre class="brush:php;toolbar:false;"></pre>） -
pre-wrap：保留空格和换行，同时允许长单词或连续空格内自动折行（最常用）
多数场景下，pre-wrap 是平衡可读性与布局安全的选择；若需严格等宽对齐（如代码片段），才用 pre。
在 <div> 或 <code><p></p> 中启用空格保留的写法
不需要改 HTML 结构，纯 CSS 即可生效。注意不要只写类名，必须显式设置 white-space：
<div class="preserve-spaces"> 这里有 四个空格， 还有换行。 </div>
对应样式：
.preserve-spaces {
white-space: pre-wrap;
}
常见错误是加了 font-family: monospace 就以为空格会保留——其实不会，必须配 white-space。
服务端输出或 JS 动态插入时的注意事项
如果空格来自后端模板（如 Jinja、Twig）或 JS 的 innerHTML 赋值，要确认原始字符串里的空格没被提前 trim 或 normalize：
- Python 模板中避免
{{ text.strip() }}，改用{{ text }} - JS 中不要用
String.prototype.trim()或正则/\s+/g清洗源数据 - 若内容含 HTML 标签，又想保留空格，得用
textContent而非innerHTML，否则标签会被解析，空格逻辑失效
最隐蔽的问题是：开发时看源码有缩进，但浏览器开发者工具的“Elements”面板会自动折叠显示空白——得切到“Console”里 getComputedStyle(el).whiteSpace 确认是否生效，再检查真实渲染效果。
