Vue项目，用模板语法{{}}插值渲染文本，文本不能换行的坑

<p>{{contentTitle}}</p>

 

data() {

　　return {

　　　　contentTitle: `第一行

　　　　第二行`,

　　}

},

 

contentTitle这个变量赋的值是，ES6的字符模板

根据说明，在这个字符模板内换行，会直接输出换行，不需要添加什么\n,<br>这类东西。

 

但渲染出来的文本根本没有换行，是这样的：

第一行 第二行

（换行符显示为一个空格）

 

之后查了一下资料说是要用，v-html进行数据的渲染

<p v-html="contentTitle"></p>

但事实是，依然无效

 

最后看了这个博文

https://www.cnblogs.com/leegent/p/9274424.html

 

使用了CCS的属性：white-space

将p容器的white-space属性设置为pre-wrap即可解决问题。

 

查看了一下这个属性发现是：规定段落中的文本换行

那么之前换行变为空格，这时设置为pre就没问题了

（pre:空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。）

 

转载于:https://www.cnblogs.com/yinblog/p/10637294.html