最直觉的解法是使用 ，它代表不可断行、不被折叠的空格；常见错误包括漏分号、未转义导致xss、中英文宽度不一致；实操建议控制数量、避免嵌套，段落级连续空格推荐white-space: pre-wrap。
直接用 适合小范围补空，但别堆太多
段落里想让“姓名： 张三”显示三个空格？ 是最直觉的解法。它代表一个不可断行、不被折叠的空格，浏览器照单全收。
常见错误现象：
- 写成
 （漏分号）→ 浏览器当普通文本渲染，不生效 - 在 React/Vue 模板中用
v-html或dangerouslySetInnerHTML插入时，没做 HTML 实体转义 → 可能被二次解析或触发 XSS - 中英文混排时宽度不一致 →
实操建议：
- 静态文本中控制在 1–4 个以内；超过建议换方案
- 避免嵌套，比如别写
- 它不认换行，所有
white-space: pre-wrap 是段落级连续空格的推荐解法
给 <p></p> 加 style="white-space: pre-wrap;"，就能让段落内所有空格、制表符、换行符原样保留，同时支持自动换行——这是绝大多数正文场景的平衡点。
使用场景：
- 后端返回带缩进的日志或 JSON 字符串，前端要原样呈现
- 用户输入的诗歌、地址、格式化说明等需保留空格语义的内容
- 移动端响应式页面，既要空格又要防溢出
参数差异注意点：
-
pre：保留空白但不换行 → 长文本会撑破容器，慎用于段落 -
pre-wrap：保留空白 + 允许换行 → 推荐，兼容性好，现代浏览器全覆盖 -
pre-line：只保留换行，合并连续空格 → 不满足“连续空格”需求
性能影响很小，但别给整页 或长列表加这个样式，否则文本无法折行，破坏响应式。
别用 <pre class="brush:php;toolbar:false;"></pre> 包段落，它语义错、样式重
<pre class="brush:php;toolbar:false;"></pre> 确实能原样保留所有空格和换行，但它自带等宽字体、上下 margin，且语义上表示「预格式化文本」——比如代码块、ASCII 图。拿它包普通段落，等于穿西装去游泳。
容易踩的坑：
- 强行套
<pre class="brush:php;toolbar:false;"><p>...</p></pre>→ HTML 规范禁止块级标签嵌套在<p></p>中，浏览器会自动闭合<p></p>，结构错乱 - 忘记重置样式 → 默认
font-family: monospace和margin: 1em 0会干扰排版 - 长行不折行 → 即使加了
white-space: pre-wrap，<pre class="brush:php;toolbar:false;"></pre>的默认行为仍可能优先级更高，得额外覆盖
如果真要用，至少写成：
<pre class="brush:php;toolbar:false;" style="font-family: inherit; margin: 0; white-space: pre-wrap;"> 这里有两个前导空格 这里有四个前导空格
真正难的不是显示空格，而是判断该不该用
多数时候，你纠结“怎么让三个空格显示出来”，其实问题不在空格本身，而在结构没理清：用空格对齐的，大概率该用 padding、text-indent 或 flex 布局；用空格分隔字段的，更适合语义化标签 + CSS 间距控制。
和 white-space 是工具，不是布局方案。它们解决的是「内容中本就该有多个空格」的场景，比如用户输入的原始文本、机器生成的日志、需要像素对齐的 ASCII 表格。一旦开始靠堆空格来模拟缩进或对齐，就该停下来问问：这里是不是该换种结构方式了？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
