前端处理后端文本换行展示的四种方案

作者：橙子

时间：2026-10-31

本文介绍了前端接收后端含回车符文本时的四种换行展示方法。包括使用正则替换为br标签、利用pre标签自动解析、通过CSS white-space属性控制空白符，以及在Vue中通过计算属性或数组转换实现。每种方法各有优劣，适用于不同场景。

文章目录

前言：

当后端返回包含换行符的长文本时，前端直接展示往往会导致所有文字连成一片，无法正确换行。本文探讨以content变量代表后端返回的原始文本内容，解决这一显示问题。

方法一：

HTML中的“↵”符号通常被识别为\r、\n等转义字符。我们可以通过正则表达式将换行符替换为HTML的 标签，例如使用.replace(/(\r\n|\n|\r)/gm, ' ')。需要注意的是，如果文本中包含英文尖括号“<>”，此方法可能导致其无法正确显示。

<div v-html="content.replace(/(\r\n|\n|\r)/gm, '<br />')"></div>

方法二：

使用

<pre>标签包裹文本。该标签能够自动识别并处理后台返回的换行符号，保持原有的格式进行展示。

<pre>{{content }}</pre>

方法三：

利用CSS的white-space属性。

<div class="logDetail">{{ content }}</div>

.logDetail {
  white-space: pre-wrap;
  /* white-space:pre-line; */
}

white-space CSS属性用于定义元素内部空白符的处理方式。

pre-wrap：连续的空白符会被保留。当遇到换行符、 元素，或者为了填充“行框盒子(line boxes)”时才会发生换行。
pre-line：连续的空白符会被合并。当遇到换行符、 元素，或者为了填充“行框盒子(line boxes)”时会发生换行。

方法四：

以下示例基于Vue框架实现，其他框架的思想类似。

<template>
    <div v-html="contentFormat"></div>
</template>
<script>
export default {
    data(){
        return{
            //存储后端返回的，文本
            content:"",
        }
    },
    //计算属性，与data同级
    computed: {
        contentFormat() {
          //this.content存储后端传回来的文本数据，就是要对这个数据进行处理
          let arr = this.content.split("");
          return arr
            .map((item) => {
              return item === "\n" ? "<br>" : item;
            })
            .join("");
        },
    },
    methods:{
        getData(){
            ....
            this.content=xxx;
        }
    }
}
</script>