html中普通空格被浏览器压缩，可用 、 或css的white-space属性（如pre-wrap）保留；js中需用textcontent配合\u00a0或innerhtml转义，避免直接拼接空格。
HTML 里普通空格直接被忽略，怎么让它显示出来
浏览器默认会把连续的空白字符（空格、换行、制表符）压缩成一个空格，甚至整个删掉。所以写 或 是最直接的解法。
常见错误现象：在 <p>hello world</p> 里敲了四个空格，页面上只显示一个；用 innerText 赋值带空格的字符串，空格照样消失。
-
-
- 避免用多个
margin、padding或letter-spacing
CSS 的 white-space 怎么控制空格显示
当你要保留一段文字里的所有空格和换行（比如代码块、日志输出），white-space 是更灵活的方案，比堆 干净得多。
使用场景：渲染用户提交的带格式文本、展示 JSON 响应、调试日志输出。
立即学习“前端免费学习笔记（深入）”；
-
white-space: pre—— 保留空格和换行，但不自动换行（内容超宽会溢出） -
white-space: pre-wrap—— 保留空格和换行，且允许自动换行（日常最推荐） -
white-space: pre-line—— 合并连续空格，但保留换行（类似普通段落，只是换行生效） - 注意：设了
pre类值后，内联元素（如<span></span>）的换行也会被保留，可能影响布局
JavaScript 动态插入空格时容易踩的坑
用 JS 拼接字符串或设置 textContent/innerHTML 时，空格行为和 HTML 源码里不完全一致。
常见错误现象：用 element.textContent = 'a' + ' '.repeat(4) + 'b'，结果还是只显示一个空格；或者用 innerHTML 插入含空格字符串，却被解析器压缩。
-
textContent不解析 HTML，所以' '会被当纯文本显示，不是空格——必须用innerHTML才生效 - 想用 JS 控制空格数量，优先走 CSS：
element.style.whiteSpace = 'pre-wrap'，再塞原始字符串 - 如果必须用实体，记得转义：JS 字符串里写
'a b'是错的，得写'a b'（&是&的实体） -
String.fromCharCode(160)可生成textContent场景
用 <pre class="brush:php;toolbar:false;"></pre> 标签是不是万能解法
<pre class="brush:php;toolbar:false;"></pre> 确实默认启用 white-space: pre，但它自带样式副作用，不是“无感”的空格解决方案。
性能/兼容性影响：现代浏览器没问题，但 <pre class="brush:php;toolbar:false;"></pre> 默认是等宽字体、上下有 margin，还可能触发额外的重排。
- 别为了空格硬套
<pre class="brush:php;toolbar:false;"></pre>—— 它的本意是“预格式化文本”，比如代码、ASCII 图，不是空格开关 - 如果只是局部需要，用
<span style="white-space: pre-wrap"></span>更轻量、可控 - 在表单输入或富文本编辑器里，
<pre class="brush:php;toolbar:false;"></pre>会导致光标行为异常，慎用
