<pre>标签能原样保留空格、制表符和换行，因其默认应用white-space: pre，但需避免源码缩进、转义特殊字符、显式设置等宽字体与white-space，并在动态内容中用textContent注入以确保空白字符真实存在。
用 <pre> 标签保留原始空格和换行
<pre> 是最直接的方案：它告诉浏览器“按源码原样渲染”，包括所有空格、制表符和换行。适合展示代码块、日志、对齐文本等场景。
但要注意：<pre> 默认使用等宽字体，且会继承父级的 white-space 行为（如设为 nowrap 会失效）。若需保持当前字体，必须显式加 CSS：
style="font-family: inherit; white-space: pre;"
- 不适用于段落内局部空格控制（它作用于整块内容）
- 前后缩进或换行会被当作文本一部分显示，容易破坏布局
- 服务端返回含多余空格的字段（如
${item.partNo}）时，套一层<pre>是最快修复方式
用 white-space CSS 属性精细控制换行与空格行为
比起包裹标签，white-space 更灵活。关键取值有三个：
-
white-space: pre—— 保留空格和换行，但不自动换行（文字超宽会溢出） -
white-space: pre-wrap—— 保留空格和换行，且允许在单词间正常换行（最常用） -
white-space: pre-line—— 合并连续空格，但保留换行符（类似普通段落，只是换行生效）
实际用法示例：
立即学习“前端免费学习笔记（深入）”；
<div style="white-space: pre-wrap;">姓名： 张三</div>
注意：该属性对子元素也生效，若内部有 <span> 等内联元素，它们的空白处理也会被统一控制。
为什么直接写多个空格无效？
HTML 规范定义了“空白折叠”（whitespace collapsing）：浏览器会把连续的空白字符（空格、制表、换行）压缩成单个空格，并忽略开头结尾的空白。这不是 bug，是标准行为。
常见误判点：
- 在开发者工具里看到 HTML 源码有多个空格 ≠ 页面渲染出多个空格
-
<span> a b </span>中普通空格仍会被折叠，只有 - 服务端模板（如 JSP、Thymeleaf）输出的空格，在到达浏览器前就已被 HTML 解析器处理
不是万能的，慎用于动态内容
能稳定插入一个不可换行空格，但它的本质是 Unicode 字符 U+00A0，不是“空白控制指令”。这意味着：
- 每个
- 大量使用会导致 HTML 体积膨胀、可读性下降（如
- 后端返回的字符串若含真实
innerHTML渲染时可能被二次转义 - 在
textarea或表单提交中，
真正需要语义化“此处不能断行”的地方（如 “10 kg”），用 ；需要批量保留格式的地方，优先选 white-space: pre-wrap。
