在 vue 项目，有时请求返回的数据?中会有含有 \n 的字符串，如果直接渲染的话无法实现换行。?
一、通过 css属性 实现
设置 white-space: pre-wrap;? 代码如下：
<div style="white-space: pre-wrap;">{{含有\n的字符串}}</div>扩展：
white-space属性值：
二、使用v-html实现
首先，将字符串里的 \n 替换为 <br>，然后用 v-html 指令渲染字符串为 innerHTML 。 代码如下:
// JS部分 this.text = res.data.replace(/\n/g,'<br>') // HTML部分 <div v-html="text"></div>三、<pre>标签
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。代码如下:
<pre>{{含有\n的字符串}}</pre>注意：在选择<pre>标签时，如果文字太长的行可能会撑开固定宽度的容器或者超出容器范围。解决方法：
pre { //方法一：保留空白符序列，但是正常地进行换行。 white-space: pre-wrap; //方法二：添加横向滚动条 overflow-x: auto; }最后，虽然三种方法都可以实现，但本人比较推荐前两种。
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
