Vue-Vue 中 v-html 内容不换行？别忘了 white-space: pre-wrap

目录

引言

问题复现

原因解析

HTML 中不会自动识别 \n

如何让换行符生效？

正确解决方案

拓展知识点：white-space 的几种常见取值

安全性提示：小心 XSS 攻击

总结

---

引言

在开发 Vue 项目的过程中，我们经常会遇到需要将服务端返回的 HTML 字符串渲染到页面上的需求，最常用的方式就是通过 v-html 指令。但你是否遇到过这样的情况：文本中明明有 \n 换行符，页面上却完全没有换行，所有文字都被渲染成一行？

本文将详细剖析这个常见问题的原因，并给出完整解决方案，顺便介绍几个易混淆的 CSS 样式行为，帮助你彻底搞懂富文本的换行机制。

问题复现

设想我们从后端接口获取了如下内容：

this.previewContent = "第一步：观察问题\n第二步：提取条件\n第三步：解题思路";

然后我们在模板中通过 v-html 进行渲染：

但结果页面渲染成了：

第一步：观察问题第二步：提取条件第三步：解题思路

所有换行符 \n 完全失效，文本一整行挤在一起，严重影响阅读。

原因解析

HTML 中不会自动识别 \n

虽然 JavaScript 字符串中 \n 表示换行，但在 HTML 中，

、 这样的容器默认使用 CSS 的 white-space: normal 样式，它会忽略所有空格、Tab 和换行字符。

这意味着：

• \n 不会自动变成
；

• 连续的空格也会被压缩为一个空格；

• 所以结果自然就是一整行。

如何让换行符生效？

要让 \n 被视为换行符，关键就是设置样式：

white-space: pre-wrap;

这是一个非常好用的 CSS 样式值，它具有以下行为：

• 保留文本中的换行符 \n

• 保留空格

• 如果文本超过容器宽度，允许自动换行

正确解决方案

我们只需要给包含 v-html 的标签加上 style="white-space: pre-wrap;" 即可：

也可以封装为一个样式类：

/* style.css */
.pre-wrap {
  white-space: pre-wrap;
}

这样就能保持内容中的 \n 换行符原样渲染出来，效果如下：

第一步：观察问题
第二步：提取条件
第三步：解题思路

拓展知识点：white-space 的几种常见取值

值	含义
normal	默认，忽略多余空格和换行
pre	保留空格和换行符，但不进行自动换行，超出部分会横向滚动。
nowrap	忽略换行，文本强制在一行
pre-wrap	保留空格和换行，并允许自动换行（推荐）
pre-line	合并空格，保留换行

对于用户输入、服务端文本等富文本场景，建议使用 pre-wrap。

安全性提示：小心 XSS 攻击

v-html 虽然方便，但它绕过了 Vue 的模板安全机制，不要直接绑定用户输入的 HTML 内容。确保内容来自可信源或已使用服务端进行转义和过滤，防止 XSS 攻击。

如果需要更安全的 HTML 渲染方式，可以使用开源库如：

• dompurify：强大的 DOM 清洗器

• marked：安全的 Markdown 渲染器

总结

当我们使用 Vue 的 v-html 指令渲染包含 \n 的文本时，必须手动指定 white-space: pre-wrap 才能让换行生效。这是因为 HTML 元素默认不会处理换行符。理解并掌握这个小细节，能让我们的富文本渲染更加符合用户期望。