html默认折叠空白符，需用 或white-space css属性控制空格；js中textcontent/innerhtml均会折叠空格，应配合white-space样式或正确转义 实体。
为什么直接敲多个空格只显示一个
这是 HTML 的默认行为，叫“空白折叠”（whitespace collapsing）：浏览器会把连续的空格、制表符、换行符全部压缩成单个空格，甚至在某些上下文里直接忽略。比如 <p>hello world</p> 渲染出来就是 hello world，中间只剩一个空格。
这不是 bug，是规范设计——HTML 本意是描述结构，不是排版工具。所以想“精确控制空格数量”，得绕过这个默认逻辑。
用 替换普通空格最直接
是不换行空格（non-breaking space），每个都算独立字符，不会被折叠，也不触发换行。适合文本内微调，比如对齐、缩进、保留单词间距。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 写
name age就真显示三个空格 - 不能写在属性值里，比如
<div class="box active"> 会破坏 class 解析 <li>别用一堆 <code>模拟 margin——那是样式问题，该用margin-left或padding - 注意：JS 字符串里要写成
'name' + String.fromCharCode(160) + 'age'或'name\u00A0\u00A0\u00A0age'，写'name age'不生效（& 未被解析） -
white-space: pre—— 保留所有空格和换行，但不自动折行（超宽内容会溢出容器） -
white-space: pre-wrap—— 保留空格和换行，且允许自动换行（日常最推荐） -
white-space: pre-line—— 合并连续空格，但保留换行（类似普通段落，只是换行有效） - 设了这些值后，
<span></span>或<em></em>里的换行也会被保留，可能意外撑高行高，需留意 -
el.textContent = 'a b'→ 页面还是a b（空格被折叠） -
el.innerHTML = 'a b'→ 还是a b（HTML 解析器照样折叠） - 正确做法一：先设
el.style.whiteSpace = 'pre-wrap'，再用textContent塞原始字符串 - 正确做法二：用
innerHTML插入含el.innerHTML = 'a b' - 千万别在 JS 字符串里直接写
'a b'——&是普通字符，不是实体起始符
用 white-space CSS 属性批量保留原始空格
当你要渲染整段带格式的文本（比如用户提交的日志、JSON 响应、代码片段），white-space 比堆 更干净、可维护。
动态插入空格时 JS 容易踩的坑
用 JS 改内容时，空格行为和手写 HTML 不一样，尤其容易混淆 textContent 和 innerHTML。
真正麻烦的是混合场景：比如从 API 拿到带空格的字符串，又要渲染又要防 XSS。这时候 和 white-space 往往得配合用，而且得确认后端有没有多层转义。一个空格没对齐，常常不是写错了，而是某处悄悄 unescape 了两次，或者用了 innerText 却期待 HTML 解析。
