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

{{contentTitle}}

data() {
  return {
    contentTitle: 第一行     第二行,
  }
},

contentTitle这个变量赋的值是,ES6的字符模板
根据说明,在这个字符模板内换行,会直接输出换行,不需要添加什么\n,
这类东西。

但渲染出来的文本根本没有换行,是这样的:
第一行 第二行
(换行符显示为一个空格)

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

但事实是,依然无效

最后看了这个博文
https://www.cnblogs.com/leegent/p/9274424.html

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

查看了一下这个属性发现是:规定段落中的文本换行
那么之前换行变为空格,这时设置为pre就没问题了
(pre:空白会被浏览器保留。其行为方式类似 HTML 中的

 标签。)

posted @ 2024-03-24 14:05  lambertlt  阅读(141)  评论(0编辑  收藏  举报