white-space: pre-wrap 是最实用的通用方案，它保留换行与连续空格且允许自动折行，兼容响应式布局，无需修改HTML结构或强制等宽字体。
white-space: pre-wrap 是最实用的通用方案
多数场景下，直接给容器加 white-space: pre-wrap 就能同时保留换行、连续空格，并支持自动折行——不用改 HTML 结构，也不强制等宽字体。
它和 pre 标签行为接近，但更灵活：不会撑破父容器，也兼容响应式布局。常见踩坑点是误用 pre-line，它会把多个空格合并成一个，导致缩进丢失。
-
pre-wrap：保留所有空格 + 换行 + 允许折行（推荐） -
pre：保留所有空格 + 换行，但不折行（长文本会溢出） -
pre-line：只保留换行，空格全被合并（不适合缩进对齐）
用 标签时必须处理默认样式
确实原样保留空格和换行，但它默认用 monospace 字体、带上下 margin、不折行——这些在普通内容里往往突兀。
实际使用前至少要加两行 CSS：
- 重置字体：
font-family: inherit或指定你页面的主字体 - 控制换行：
white-space: pre-wrap（覆盖默认的pre行为） - 清理间距：
margin: 0，否则上下会多出空白
示例： 第一行有两个空格\n 第二行有四个
JS 动态渲染时别用 textContent 插入含 \n 的字符串
后端返回或用户输入的文本含 \n，如果直接赋值给 textContent，换行符会被当普通字符忽略，显示成一整行。
正确做法是用 innerHTML 并配合 white-space: pre-wrap，或者先替换：
- 用正则转
\n→str.replace(/\n/g, '
') - 但注意：必须用
innerHTML赋值，textContent会把 - 若字符串来自不可信来源，需先做 XSS 过滤，再替换
手动插 只适合极小范围对齐
能防折叠、防换行，但它是“不可断空格”，浏览器不会在它后面断行——这在长段落里容易导致横向滚动或溢出。
它真正适用的场景非常有限：
- 表单标签对齐，比如
姓名： 张三 - 数字/单位之间防拆分，如
100 px - 绝对不要用它实现多行缩进，既难维护，语义也错乱
复杂格式还是交给 white-space 或 ，别堆 。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
