Vue插值文本换行问题

Posted leegent

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue插值文本换行问题相关的知识,希望对你有一定的参考价值。

问题背景:

后端返回的字符串带有 换行符,但Vue将其插值渲染成div内部文本后,文本并不换行,换行符显示为一个空格。

 

目标:

让文本在换行符处换行。

 

解决方法:

思路:实现文本换行有两种方法,一是html方法,即<br>标签;二是CSS方法,即white-space属性。

方法1. 使用v-html

   首先,将字符串里的 替换为<br>,然后用v-html指令渲染字符串为innerHTML。

// JS部分
this.text = res.data.replace(/
/g, ‘<br>‘)

// HTML部分
<div v-html="text"></div>

  这种方法比较麻烦,而且存在安全问题,故不推荐使用。

 

方法2. 设置white-space属性(推荐)

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

// CSS部分
.text-wrapper
{ white-space: pre-wrap; }

// HTML部分
<div class="text-wrapper">{{text}}</div>

pre-wrap值的意思是保留空白并且正常换行。

white-space各属性值详见这里。其实设置为pre即可使换行符发挥作用,但这时文本在div宽度不足时不会自动换行,而是撞破边界延伸到div外部去,所以还得加上wrap。





以上是关于Vue插值文本换行问题的主要内容,如果未能解决你的问题,请参考以下文章

关于vue-elementui中单元格内换行问题解决

如何在Angularjs中的字符串插值中获得换行符

Vue模板语法——插值

Vue 的插值语法

Vue数据绑定生命周期钩子文本插值和表达式

Vue 插值语法与指令系统