white-space: pre-wrap 是最稳妥的选择，它能同时保留原始换行符、空格、制表符，并允许在容器边界自动折行，避免横向溢出，适用于用户评论、带格式日志等场景。
white-space: pre-wrap 是最稳妥的选择
直接给段落元素加 white-space: pre-wrap，它能同时保留原始换行符（\n）、空格、制表符，并且允许内容在容器边界自动折行——既不像 pre 那样硬扛长文本导致横向溢出，也不像 pre-line 那样把多个空格合并成一个。
常见错误是只用 white-space: pre：它确实保留所有空白，但禁用自动换行，一旦遇到长 URL 或无空格字符串，就会撑破容器宽度，必须配合 overflow-x: auto 才不至于破坏布局。
- 适用场景：用户提交的评论、后台返回的带格式日志、富文本编辑器导出的纯文本
- 注意不要对整个页面或大范围
p标签批量设置，避免影响语义化排版 - 如果段落里混有 HTML 标签（比如
<strong></strong>），pre-wrap依然生效；但若用textContent赋值，需确保原始字符串含真实\n字符，而非被 JS 处理掉
动态插入时别用 innerText +=
用 innerText 拼接含空格/换行的字符串，每次读取都会触发“规范化”——浏览器按 white-space: normal 规则抹掉多余空白，结果就是 "a\n b" 变成 "a b"。
正确做法是改用 textContent 直接赋值，或一次性写入完整字符串：
const el = document.querySelector('p');
el.textContent = "第一行\n 第二行\n 第三行"; // ✅ 保留全部空白
-
textContent不解析 HTML，不触发重排，性能更好 - 如果目标元素已有子节点（如内嵌
span），textContent = ...会清空全部子节点，此时应改用appendChild(document.createTextNode(...)) - 服务端返回的 JSON 字段若含
\n，前端 JS 接收后无需额外处理，直接赋给textContent即可
pre 标签适合语义明确的预格式化内容
当内容本身就是代码块、ASCII 图、或需要严格对齐的表格文本时，用 <pre class="brush:php;toolbar:false;"></pre> 标签比 CSS 更合适——它自带语义，且浏览器默认应用 white-space: pre，无需额外样式。
但要注意两点：
-
<pre class="brush:php;toolbar:false;"></pre>默认用等宽字体，若要匹配正文样式，得加font-family: inherit或具体字体声明 - 它会保留源码里的首行缩进和末尾空行，若后端返回的文本前后有多余换行，渲染出来会有额外空白，建议提前 trim 或用 CSS 控制
margin - 别把
<pre class="brush:php;toolbar:false;"></pre>塞进<p></p>里——HTML 规范禁止块级元素嵌套块级元素，会导致解析异常
br 标签只解决局部强制换行
<br> 是唯一能精准控制“某处必须换行”的方式，但它不保留空格，也不处理整段文本的格式逻辑。适合地址、诗歌、或已知固定断点的短文本。
常见误用：
- 用多个
<br>替代段落间距：这破坏语义，屏幕阅读器无法识别段落结构，也难用 CSS 统一调整 - 在响应式布局中依赖
<br>断行：移动端宽度变化后，原本合适的换行点可能错位 - 从后端直接返回含
<br>的 HTML 字符串并用innerHTML插入：存在 XSS 风险，除非内容完全可信且已过滤
真正难处理的不是“怎么换行”，而是“换行和空格在不同上下文中的行为一致性”——比如同一段文本，在编辑器里看到的缩进，在 API 返回里是 \t 还是空格，前端渲染时又是否被 CSS 或 JS 层层转换过。这些细节不显眼，但一出问题就很难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
