white-space: pre-wrap是现代项目中最常用、最可控的方案，它不依赖字符实体，能同时保留空格、制表符、换行并允许自动折行，适用于API日志、用户输入文本、代码片段等场景。
能解决小范围空格需求，但不是万能胶；white-space: pre-wrap 才是现代项目里最常用、最可控的方案。
什么时候该用
它只适合「明确知道要几个空格」且「不涉及换行」的场景，比如单位前防断行、字段名对齐、表格内微调。
- 写法必须是
姓名 张三有效，姓名 张三中间那个普通空格仍会被折叠 - 在 React/Vue 模板中，得写成
{' '}或用v-html渲染，否则会被当字符串字面量处理 - 别用它缩进整段文字：语义错误、响应式下易溢出、屏幕阅读器会逐个读“不间断空格”，影响可访问性
为什么 white-space: pre-wrap 是首选
它不依赖字符实体，不污染 HTML 结构，还能同时保留空格、制表符、换行，并允许自动折行——真正兼顾功能与体验。
- 适用场景：API 返回的日志、用户输入的带缩进文本、代码片段展示、诗歌排版
- 和
pre的关键区别：pre-wrap允许长行折行，pre不允许，后者容易撑破容器 - 移动端要注意：iOS Safari 遇到超长无空格字符串（如 base64）时，
pre-wrap可能不折行，需加word-break: break-all - 如果父容器设了
overflow: hidden或text-overflow: ellipsis，pre-wrap内容可能被截断，得配合word-break: break-word
<pre> 标签不是“加空格工具”
它是语义化标签，表示「预格式化文本」，默认启用 white-space: pre + 等宽字体 + 块级外边距。强行套用会引入副作用。
立即学习“前端免费学习笔记（深入）”；
- 常见误用：把普通段落包进
<pre>，结果字体发虚、字号变小、上下留白异常 - 正确做法：真需要原样渲染（比如 ASCII 图、JSON 示例），再用
<pre>；否则用<div style="white-space: pre-wrap;">更干净 -
<pre>不能嵌套在<p>里，HTML 规范禁止块级元素嵌套进<p> - 内容来自用户或外部接口时，
<pre>里的<、>若未转义，会被解析为标签，导致结构错乱甚至 XSS
真正难的不是让空格显示出来，而是判断该用语义化布局（如 padding、flex）还是空白控制——多数时候，堆空格是结构没理清的信号。
