最快方式是直接用 ，但数量须控制在1–4个内；适合代码等需原样渲染的内容；white-space: pre-wrap更灵活；全角空格和word-spacing不推荐用于对齐。
直接用 最快，但数量要控制
静态 HTML 里写 是最直接、兼容性最好的方式，浏览器从 IE6 到 Chrome 130 都认它。每个 渲染为一个不可断行、不被折叠的空格，不会受父容器 white-space 设置干扰。
常见错误现象：
– 写成  （漏掉分号）→ 浏览器当普通文本，原样显示
– 连续写十个 → 可读性差，维护困难，语义混乱
– 中英文混排时用它对齐 → 字体下宽度不一致，中文常比英文窄，视觉错位
实操建议：
– 数量严格控制在 1–4 个以内，比如“姓名： 张三”
– 不嵌套、不叠加，别写成 ，就老老实实写两遍
– 避免用于整段缩进或表格对齐，那是 CSS 的职责
用 <pre class="brush:php;toolbar:false;"></pre> 标签保留原始格式，但要注意字体和换行
<pre class="brush:php;toolbar:false;"></pre> 是唯一能让源码里敲的空格、制表符、换行全部原样渲染的 HTML 元素。它不依赖 CSS，也不需要转义，适合展示代码块、日志、ASCII 图等。
常见错误现象：
– 把普通段落包进 <pre class="brush:php;toolbar:false;"></pre> → 默认用等宽字体（如 monospace），破坏页面整体字体风格
– 忘记 <pre class="brush:php;toolbar:false;"></pre> 内容会强制保留换行 → 源码里回车太多，页面出现意外空行
– 在响应式布局中未限制宽度 → 长空格导致水平滚动
实操建议：
– 仅用于真正需要“所见即所得”的内容，比如 <pre class="brush:php;toolbar:false;">for (let i = 0; i </pre>
– 加 CSS 覆盖默认字体：<pre class="brush:php;toolbar:false;" style="font-family: inherit;"></pre>
– 若需换行但不要等宽字体，优先选 white-space: pre-wrap 而非 <pre class="brush:php;toolbar:false;"></pre>
white-space: pre-wrap 是动态内容的首选方案
对静态页面中需要保留空格又不想改语义结构的场景，white-space: pre-wrap 比 pre 更灵活：它保留所有空格和换行，同时允许文本在边界处自动折行，不破坏流式布局。
使用场景：
– 从 CMS 或 JSON 静态文件读取含缩进的说明文本
– Markdown 预编译后生成的 HTML 段落，需保留原文档空格层级
– 多语言站点中，某些语言（如日文）依赖空格做视觉分隔
参数差异：
– pre：保留空格+换行，但不折行 → 容易撑破容器
– pre-line：只保留换行，空格仍被折叠 → 不满足“连续空格”需求
– pre-wrap：空格、换行全保留，且可折行 → 平衡性最好
实操建议：
– 给目标元素加类：<p class="preserve-spaces">第一行 第二行</p>，再配 CSS：.preserve-spaces { white-space: pre-wrap; }
– 不要对整个 或 <main></main> 设该样式，避免影响按钮、链接等内联元素的默认行为
– 注意 Safari 旧版本对 pre-wrap 的首行缩进处理有微小偏差，若需精确对齐，补一句 text-indent: 0;
别碰全角空格和 word-spacing 做对齐
全角空格（ ）虽能绕过 HTML 空白折叠，但它本质是 Unicode 字符（U+3000），宽度依赖字体，中文字体下通常比英文宽一倍；而 word-spacing 控制的是“词间距”，不是空格数量，对单字中文无效，对英文也只影响单词之间，无法实现“两个词中间塞三个空格”的精准控制。
容易踩的坑：
– 用 替代 → 在不同字体/系统下宽度漂移，打印时更明显
– 给 <span></span> 设 word-spacing: 20px 想模拟缩进 → 实际效果是把每个“词”往右推 20px，相邻词间隙变成 40px，不可控
– 混用 和全角空格 → 源码混乱，审查元素时难以区分
实操建议：
– 对齐需求一律交给 CSS：padding-left、text-indent 或 Flex/Grid 的 gap/justify-content
– 若必须用空格做视觉占位，只用 ，并限定在纯文本上下文中
– 所有涉及宽度敏感的场景（如发票、账单、代码注释对齐），优先用 <pre class="brush:php;toolbar:false;"></pre> + 自定义等宽字体，或预生成 SVG
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
