javascript 换行-后端如何根据前端返回的文本数据进行换行显示？

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

假设前端返回一个文本数据：

文本内容是前面圈出的部分javascript 换行，内容中包含换行符（↵）。 对于此类数据，需要在后端页面进行一点处理才能正常显示。 如果没有经过处理，有换行符的地方不会显示这样的内容：

正常显示应该是：

这些效果可以通过以下两种方式实现：

方法一：（以下是在Vue中实现的javascript 换行，但是所有框架的思路都是一样的）

//部分代码：
//
<div class="commendContent"
             v-html="commendContent">
</div>
 
 //计算属性
computed: {
    commendContent () {
      //this.commend.content是后端传回来的文本数据，就是要对这个数据进行处理
      let arr = this.commend.content.split("");
      return arr.map((item) => {
        return item === "n" ? "
" : item
      }).join("")
    }
  },

思路：将文本字符串转换为链表，然后将链表中的“n”替换为浏览器正常解析的换行标签

就是这样。 （前端发回的“↵”是n），而且还可以用正则表达式将字符串的换行符转换为，所以不需要转换成链表。

方法二：

将以下CSS代码添加到显示内容的容器div中：

	white-space:pre-line;
	或
	white-space:pre-wrap;

CSS 的空白属性用于设置如何处理元素中的空白。