长文本段落换行在前端中经常用得到。
最近被迫做了好多前端项目。。
频繁遇到两个问题,一个是跨域配置,一个就是换行。
我并没系统学过前端,遇到的问题只能一个一个解决,看一点学一点。。有时间还是应该系统学一下,以后估计需要用到的地方还很多。。
接收到的文本一般是会带\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"

就是这个。。
码一下。

Logo

前往低代码交流专区

更多推荐