vue识别\n换行

发布时间：2024-04-21 13:59:13

258 阅读

0 评论

在项目中，需要渲染字符串文本，文本中需要通过\n换行，如果直接渲染的话无法识别\n实现换行。

下面提供两种方式实现换行

1. 使用v-html渲染。

通过正则将字符串中\n转换成v-html可以识别的标签<br />，再通过v-html渲染。

<div v-html="text"></div>

this.text = str.replace(/\n/g,'<br />')

2. 通过css实现

<div style="white-space: pre-wrap;">{{text}}</div>

white-space属性值

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 `<pre>` 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 `<br>` 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承`white-space`属性的值。