在 Vue.js 中处理文本换行操作时，最常用的方法是将换行符（\n）转换成 HTML 的
标签，或者使用 HTML 标签本身来控制换行。

1. 简单文本换行

如果在 Vue 模板中直接显示一段包含换行符的文本，并希望正确地显示换行，Vue 默认的插值语法不会自动处理换行符。需要将换行符 \n 转换为
标签。

Vue 提供了 v-html 指令，允许将内容作为 HTML 渲染，适合处理动态换行和其他 HTML 元素。

举个 🌰

展示为：

注意📢：

1、避免 XSS 攻击

v-html 允许我们直接渲染 HTML，这可能会带来 XSS（跨站脚本攻击）风险，特别是当数据来自用户输入时。因此，当使用 v-html 时，请确保内容是可信的，或者对数据进行转义处理。

2、不建议滥用 v-html

除非确实需要动态渲染 HTML，否则应尽量避免使用。

2. CSS 控制文本换行（推荐）

如果不希望使用
标签来强制换行，而是希望基于内容自动换行，那可以通过 CSS 样式来控制文本的换行行为。

white-space 属性可以帮助处理文本换行的方式。如果希望文本中的换行符保留，而不是被忽略，可以使用 pre-wrap 这个 CSS 属性。

举个 🌰

展示为：

关键点：

1、white-space: pre-wrap; 可以让浏览器保留换行符和多个空格，同时也允许在需要时自动换行。

2、pre-wrap 的优势：这种方式不需要额外使用 v-html 或进行字符串替换，非常适合展示长文本且有手动换行符的场景。

3、性能优化：与直接操作 DOM 或插入 HTML 相比，这种方法更高效，因为它只是使用 CSS 控制渲染。

3. 直接在模板中使用
标签

如果是在模板中直接写文本，并希望在模板中手动换行，可以直接插入
标签：

举个 🌰

展示为：

注意📢：

1、适合静态文本的手动换行。

2、不适合处理动态内容，需要动态生成时考虑前两种方法。

4. 结合 v-if 或条件渲染来分段显示

有时文本很长，并且希望通过条件渲染显示不同段落，也可以通过 v-if 或 v-for 来处理文本段落：

举个 🌰

展示为：

关键点：

1、split('\n')：将文本按换行符拆分为数组，每个段落用 v-for 渲染。

2、适合复杂文本的分段渲染，可以进行更多自定义的样式和布局控制。

5. 总结

1、安全性：v-html 是渲染 HTML 的强大工具，但在使用时要特别注意 XSS 攻击的风险。如果可能，尽量不要直接渲染用户输入的 HTML，必要时对内容进行安全处理。

2、性能考虑：在处理大量文本或频繁变动内容时，使用 v-html 会带来一些性能开销。如果不涉及动态 HTML，使用 CSS 或条件渲染方式会更高效。

3、换行符处理：在 Vue.js 中，直接渲染模板时换行符会被忽略，因此需要手动替换为
或使用 white-space 来处理换行。

了解到这些方法，可以根据实际场景选择合适的文本换行处理方式。