前端處理文本換行展示4種處理方法

更新時間：2024年10月12日 10:14:59 作者：MoXinXueWEB

在處理前端顯示后端傳遞的包含換行符的文本時,可以通過多種方法實現(xiàn)換行顯示,這篇文章主要介紹了前端處理文本換行展示4種處理方法,這些方法幫助前端正確展示格式化文本,解決了文本堆疊的問題,需要的朋友可以參考下

前言：

后端傳遞了一大段包含了回車符的文本內(nèi)容，前端展示的時候所有文字堆在一起，沒有換行展示。以下方法中content為后端返回的文本內(nèi)容

方法一：

“↵”符號在html中會識別別為\r,\n等轉(zhuǎn)義字符，所以我們可以使用\r\n去替換（.replace(/(\r\n|\n|\r)/gm, ’< br />')）
存在英文**<>**不顯示

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

方法二：

使用

標(biāo)簽，它會自動識別和處理后臺返回的換行符號

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

方法三：

white-space樣式

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

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

white-space CSS 屬性是用來設(shè)置如何處理元素中的空白。

pre-wrap:連續(xù)的空白符會被保留。在遇到換行符或者< br >元素，或者需要為了填充「行框盒子(line boxes)」時才會換行。
pre-line連續(xù)的空白符會被合并。在遇到換行符或者< br >元素，或者需要為了填充「行框盒子(line boxes)」時會換行。

方法四：

(下面是在Vue中實現(xiàn)的，所有框架思想一樣)

<template>
    <div v-html="contentFormat"></div>
</template>
<script>
export default {
    data(){
        return{
            //存儲后端返回的，文本
            content:"",
        }
    },
    //計算屬性，與data同級
    computed: {
        contentFormat() {
          //this.content存儲后端傳回來的文本數(shù)據(jù)，就是要對這個數(shù)據(jù)進(jìn)行處理
          let arr = this.content.split("");
          return arr
            .map((item) => {
              return item === "\n" ? "<br>" : item;
            })
            .join("");
        },
    },
    methods:{
        getData(){
            ....
            this.content=xxx;
        }
    }
}
</script>

思路：將文本字符串轉(zhuǎn)化為數(shù)組，然后將數(shù)組中“\n”換成瀏覽器正常解析的換行標(biāo)簽
即可。(后端傳回來的“↵”就是\r\n)，上面同樣可以使用正則表達(dá)式來將字符串的換行符轉(zhuǎn)換為< br >，那么就不用轉(zhuǎn)換為數(shù)組了。