Vue项目，用模板语法{{}}插值渲染文本，文本不能换行的坑
Posted yinblog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue项目，用模板语法{{}}插值渲染文本，文本不能换行的坑相关的知识，希望对你有一定的参考价值。
<p>{{contentTitle}}</p>
data() {
return {
contentTitle: `第一行
第二行`,
}
},
contentTitle这个变量赋的值是，ES6的字符模板
根据说明，在这个字符模板内换行，会直接输出换行，不需要添加什么\\n,<br>这类东西。
但渲染出来的文本根本没有换行，是这样的：
第一行 第二行
（换行符显示为一个空格）
之后查了一下资料说是要用，v-html进行数据的渲染
<p v-html="contentTitle"></p>
但事实是，依然无效
最后看了这个博文
使用了CCS的属性：white-space
将p容器的white-space属性设置为pre-wrap即可解决问题。
查看了一下这个属性发现是：规定段落中的文本换行
那么之前换行变为空格，这时设置为pre就没问题了
（pre:空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。）
以上是关于Vue项目，用模板语法{{}}插值渲染文本，文本不能换行的坑的主要内容，如果未能解决你的问题，请参考以下文章