4种前端处理文本换行展示

本文介绍了四种在前端处理文本换行展示的方法。当后端传递包含回车符的文本时,前端需要进行适当的处理以确保换行效果。方法一通过替换回车符为`<br>`标签;方法二是直接使用`<br>`标签;方法三是利用CSS的`white-space`属性,如`pre-wrap`和`pre-line`;方法四是在Vue框架中将文本字符串转换为数组,用数组的换行符生成`<br>`标签。这四种方法能够解决文本在前端展示时的换行问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

序:

后端传递了一大段包含了回车符的文本内容,前端展示的时候所有文字堆在一起,没有换行展示。以下方法中content为后端返回的文本内容

方法一:

“↵”符号在html中会识别别为\r,\n等转义字符,所以我们可以使用\r\n去替换(.replace(/(\r\n|\n|\r)/gm, ’< br />'))
存在英文**<>**不显示

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

方法二:

使用

标签, 它会自动识别和处理后台返回的换行符号

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

方法三:

white-space样式

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

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

white-space CSS 属性是用来设置如何处理元素中的 空白。

  • pre-wrap:连续的空白符会被保留。在遇到换行符或者< br >元素,或者需要为了填充「行框盒子(line boxes)」时才会换行。
  • pre-line连续的空白符会被合并。在遇到换行符或者< br >元素,或者需要为了填充「行框盒子(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>

思路:将文本字符串转化为数组,然后将数组中“\n”换成浏览器正常解析的换行标签
即可。(后端传回来的“↵”就是\r\n),上面同样可以使用正则表达式来将字符串的换行符转换为< br >,那么就不用转换为数组了。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值