html中显示“看得见”的空格需用 实体（ ），或使用标签保留空白符，或通过css white-space属性（如pre-wrap）精细控制。
HTML 里怎么打出一个“看得见”的空格
普通键盘敲空格，HTML 默认会把连续多个空格合并成一个，还可能被换行截断。真要显示一个固定宽度的空格，得用 （non-breaking space）——它不会被浏览器折叠，也不会在行尾被自动换掉。
-
- 别用全角空格（中文输入法下的空格），它宽度不一致，且在某些字体下渲染异常
- 单个
长文本中保持缩进和空格对齐（比如代码、日志、诗歌）
如果一段文字里有大量缩进、多级空格或想严格按空格排版， 写起来太累，也难维护。这时候该上 <pre class="brush:php;toolbar:false;"></code> 标签。</p>
<ul>
<li><code><pre class="brush:php;toolbar:false;"></code> 会让里面所有空白符（空格、制表符、换行）原样保留并按等宽字体渲染</li>
<li>默认用等宽字体（如 <code>monospace</code>），但可通过 CSS 改：<pre class="brush:php;toolbar:false;">pre { font-family: "SF Mono", Consolas, monospace; }</pre>
<li>注意：<code><pre class="brush:php;toolbar:false;"></pre> 会强制换行，且不响应 text-align；若需居中，得包一层 <div style="text-align:center">
<h3>CSS 的 <code>white-space 属性比 <pre class="brush:php;toolbar:false;"></pre> 更灵活
不想整个块都变等宽？或者需要在行内保留空格又不破坏布局？white-space 是更细粒度的控制方式。
-
white-space: pre—— 换行和空格都保留，但不自动换行（溢出容器） -
white-space: pre-wrap—— 推荐日常用：空格和换行保留，同时允许长单词/长空格串在边界处折行 -
white-space: pre-line—— 合并多余空格，但保留换行符（适合从后端返回带 \n 的文本） - 注意：这些值对 inline 元素（如
<span></span>）生效有限，建议用在<div> 或 <code><p></p>上JavaScript 动态插入空格时容易踩的坑
用 JS 拼接字符串或设置
textContent/innerHTML时，空格行为很容易误判。立即学习“前端免费学习笔记（深入）”；
- 用
textContent = "a b"→ 浏览器仍会压缩成 "a b"；得改用innerHTML = "a b" - 用
String.prototype.repeat()生成空格？别直接 repeat" "，改用" ".repeat(4) - 正则替换文本中的空格为
str.replace(/(^|[^&]) /g, "$1 ")不够健壮，推荐先转义再处理
最麻烦的其实是混合场景：既要保留用户粘贴进来的缩进，又要支持富文本编辑、还要适配移动端折行。这时候光靠空格实体或
<pre class="brush:php;toolbar:false;"></pre>不够，得结合white-space: pre-wrap+overflow-wrap: break-word+ 字体一致性控制。空格看着小，一动就是连环反应。 - 用
