vue 里面使用 v-html 插入的文本不换行的问题解决

有时候遇到接口返回一串很长的字符串，里面有换行符需要在页面上直接展示出来。

{{text}}

//或

用上面这两种方式都无法让文本换行，因为 v-html 不识别换行符，但是可以识别标签。解决方法：1、添加样式在使用 v-html 时添加样式，white-soace:pre-wrap ,让浏览器保留空白和换行符。

有时候遇到接口返回一串很长的字符串，里面有换行符需要在页面上直接展示出来。

<p>{{text}}</p>
//或
<p v-html="text"></p>

用上面这两种方式都无法让文本换行，因为 v-html 不识别换行符，但是可以识别标签。

解决方法：

1、添加样式

在使用 v-html 时添加样式，white-soace:pre-wrap ,让浏览器保留空白和换行符。

<p v-html="text" style="white-soace:pre-wrap"></p>

2、用 pre 标签包裹

被包围在 pre 标签中的文本通常会保留空格和换行符。

<pre><p v-html="text"></p></pre>

3、正则替换

用正则表达式把 \n 替换成
这样 v-html 就可以识别

<p v-html="text.replace(/\n/g,'<br/>')"></p>

本文地址：https://blog.csdn.net/weixin_43299180/article/details/112533378