在项目中碰到这样的情况，需要渲染文本域写入的内容，在编辑文本域时换行得到的文本就有了\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
文章来源：https://www.toymoban.com/news/detail-534457.html
文章来源地址https://www.toymoban.com/news/detail-534457.html
到了这里，关于HTML vue 识别文本中的\n 进行换行的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[HTML]Web前端开发技术2（HTML5、CSS3、JavaScript ）格式化文本标记，定义列表，＜blockquote＞，definition description，ruby——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/753184-1.png)
