Vue前端换行问题
长文本段落换行在前端中经常用得到。最近被迫做了好多前端项目。。频繁遇到两个问题,一个是跨域配置,一个就是换行。我并没系统学过前端,遇到的问题只能一个一个解决,看一点学一点。。有时间还是应该系统学一下,以后估计需要用到的地方还很多。。接收到的文本一般是会带\n换行符的,但是在前端中并不会出现换行。一般需要对文本进行以下处理。比如文本:“<IL-6(-597) genotypes,HBV>
长文本段落换行在前端中经常用得到。
最近被迫做了好多前端项目。。
频繁遇到两个问题,一个是跨域配置,一个就是换行。
我并没系统学过前端,遇到的问题只能一个一个解决,看一点学一点。。有时间还是应该系统学一下,以后估计需要用到的地方还很多。。
接收到的文本一般是会带\n换行符的,但是在前端中并不会出现换行。
一般需要对文本进行以下处理。
比如文本: “<IL-6(-597) genotypes,HBV>association\n” + “<IL-6(-597) genotypes,HCC>association\n” +
“<IL-6(-572) GC genotype,hepatitis>association\n” +
“<CC genotype,cirrhosis>association\n” +
“<CA haplotype,HCC>association\n” +
“<IL-6,cirrhosis>factor”
在一些场景中,用</br>
或者<pre>
代替换行符能解决。将从后端接受到的数据先分成数组,再分别加上段落标签
console.log是我用来调试的,可以注释掉。
挨个加样式来换行。(好像有点麻烦
var re=/\n/;
var temp = this.relation.split(re);
this.relation = ''
console.log("temp = "+temp)
for(var i in temp) {
if(temp[i].length > 0)
this.realtion += '<p style="text-indext:2em; margin:0">' + temp[i]+'</p>'
}
this.relation=this.relation.replace(re,"<br/>");
但是今天发现只要加一行css就能解决了。。
<div class="text item" style = "white-space: pre-wrap">
{{entity}}
</div>
style = "white-space: pre-wrap"
就是这个。。
码一下。
更多推荐
所有评论(0)