直接敲空格键没用，因为html解析阶段会将连续空格、制表符、换行统一折叠为单个空格，这是规范规定的空白折叠行为；需用实体或white-space: pre-wrap等css方案实现可控显示。
为什么直接敲空格键没用
浏览器在 HTML 解析阶段就把连续空格、制表符、换行全部合并成单个空格，这是 HTML 规范明确规定的「空白折叠」行为，不是 bug，也不是渲染引擎问题。哪怕你在编辑器里写了 hello world（中间四个空格），最终页面上仍显示为 hello world。这个过程发生在 DOM 构建之前，跟 CSS 字体、margin 或设备类型完全无关。
用 精确控制小范围空格
是唯一能保证“这里一定有一个可见空格”的 HTML 实体，每个都渲染为一个不可断行、不被折叠的空格字符。
- 要三个空格？必须写
- 在 React/Vue 模板中动态插入时，得用
v-html或dangerouslySetInnerHTML渲染，否则textContent会把 - 别用它做段落缩进或对齐：语义错误、响应式下易溢出、中英文混排时宽度不一致
- 数量建议控制在 1–4 个以内；超过就该换方案
用 white-space: pre-wrap 批量保留空格与换行
这是最实用、最现代的解法，尤其适合整段带格式的用户输入、日志、代码片段或诗歌类内容。
-
white-space: pre-wrap保留所有空格和换行，同时允许自动折行——比pre更安全，不会撑破容器 - 写法：
<div style="white-space: pre-wrap;">用户名: 张三</div>，其中四个空格会真实显示 - 注意父容器若设了
overflow: hidden或text-overflow: ellipsis，可能截断内容，需配合word-break: break-word - 别给整个
或长列表加这个样式，会导致文本无法合理折行，破坏响应式布局
为什么 <pre class="brush:php;toolbar:false;"></pre> 不是万能占位符
<pre class="brush:php;toolbar:false;"></pre> 本质是 white-space: pre 的快捷写法，但它自带副作用，容易误用。
- 默认用等宽字体（
monospace），中文显示发虚、字号偏小，需手动覆盖font-family - 禁止嵌套在
<p></p>里——HTML 规范不允许块级标签出现在段落内部 - 内容含
、<code>>等符号却未转义时，会被当真实标签解析，结构错乱甚至 XSS - 如果只是想让普通段落多几个空格，硬套
<pre class="brush:php;toolbar:false;"></pre>得额外重置margin、font-family、line-height，维护成本高
真正难的不是让空格显示出来，而是判断该用语义化布局（如 padding、flex）还是格式控制（white-space）——多数空格问题，根源是结构没理清。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
