HTML vue 识别文本中的\n 进行换行

在项目中碰到这样的情况，需要渲染文本域写入的内容，在编辑文本域时换行得到的文本就有了\n,如果直接渲染的话无法实现换行。

下面提供三种换行方式：

1.先使用正则将\n替换成<br/>标签，再用v-html渲染

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

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

2.通过css的white-space 实现，推荐使用

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

 3.使用pre标签

<pre> 标签可定义预格式化的文本，被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符

 <pre>{{text}}</pre>

使用<pre>标签 可以识别\n进行换行 但是不推荐使用

如果文字太长的一行可能会撑开固定宽度的容器或者超出容器范围

可以看一下white-space各种值的行为 对比一下pre和pre-wrap