html中直接敲空格无效因解析器执行空白折叠；可用 插入可控空格、white-space css控制整段文本空白、标签包裹预格式文本，混用多种方式易导致空格失控。

为什么直接敲空格键没用

HTML 解析器默认执行「空白折叠」（whitespace collapsing）：所有连续的空格、制表符、换行符都会被压缩成单个空格。哪怕你在 <p></p> 里写 This<space><space><space><space>works</space></space></space></space>，浏览器渲染出来仍是 This works。这不是 bug，是 HTML 规范行为。

用   插入可控空格

这是最直接、兼容性最好的方案，适合少量、确定数量的空格插入：

•   是一个不可断行空格（non-breaking space），每个都算独立字符，不会被折叠
• 要显示 3 个空格，就写    ；写错成 &nbsp &nbsp（少分号）会导致不解析
• 不能用于属性值内部作分隔，比如 <div class="a  b"> 会破坏 class 解析 <li>在 Vue/React 等框架中，JSX 里需写成 <code>{'\u00a0\u00a0\u00a0'}，不能直接写  

用 white-space CSS 控制整块文本

当需要保留一整段含空格/缩进/换行的文本（如代码片段、诗歌、日志输出），用 CSS 更高效：


html-deploy
使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
下载
• white-space: pre：保留所有空格和换行，但不自动折行——超宽内容会溢出容器
• white-space: pre-wrap：保留空格和换行，且允许自动折行——日常推荐，兼顾可读性与布局安全
• white-space: pre-line：合并连续空格，只保留换行——类似普通段落，仅换行生效
• 注意：设了 pre 类值后，<span></span> 内的换行也会被保留，可能意外撑高行高

用 <pre class="brush:php;toolbar:false;"></pre> 标签快速包裹预格式文本

语义清晰、零配置，适合展示代码、ASCII 图、对齐文本等场景：

• <pre class="brush:php;toolbar:false;">for (int i = 0; i   printf(&quot;hello&quot;);</pre> 会原样保留缩进和换行
• <pre class="brush:php;toolbar:false;"></pre> 默认是等宽字体，若需改字体，必须显式设置 font-family
• 它会把所有空白符（包括换行）转成真实空格+换行，所以源码里换行位置直接影响渲染效果
• 不适合嵌入段落中间做局部空格控制——它是个块级元素，自带上下 margin

真正容易被忽略的是：同一段文本里混用多种方式（比如在 white-space: pre-wrap 容器里又塞一堆  ）可能导致空格数量失控，尤其在响应式布局中缩放时更难调试。优先选一种主策略，再补细节微调。