前端处理文本换行展示4种处理方法
更新时间：2024年10月12日 10:14:59 作者：MoXinXueWEB
在处理前端显示后端传递的包含换行符的文本时,可以通过多种方法实现换行显示,这篇文章主要介绍了前端处理文本换行展示4种处理方法,这些方法帮助前端正确展示格式化文本,解决了文本堆叠的问题,需要的朋友可以参考下
前言：
后端传递了一大段包含了回车符的文本内容，前端展示的时候所有文字堆在一起，没有换行展示。以下方法中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 >，那么就不用转换为数组了。
总结
到此这篇关于前端处理文本换行展示4种处理方法的文章就介绍到这了,更多相关前端处理文本换行内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了JavaScript正则表达式之RegExp对象，对RegExp对象的基本使用方法，以及各种方法进行整理，感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要介绍了javascript cookie的基本操作的相关资料,这里对Cookie的操作进行了详细介绍包括获取，新建，设置有效期，添加和删除等，需要的朋友可以参考下2017-07-07
这篇文章主要给大家介绍了ES6中Class和Module的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-05-05
这篇文章主要介绍了JS实现的5级联动Select下拉选择框,涉及javascript数组调用及遍历的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要为大家详细介绍了基于JavaScript实现图片切换效果 ，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
很多网站、博客把网页生成html静态页面了，以利于搜索引擎的索引排名，减轻服务器负担。静态页面由于其稳定快速更快，给用户及站长带来了方便。但评论后如何记住用户的信息呢2012-01-01
本篇文章小编为大家介绍，用js实现小球的自由移动代码。需要的朋友参考下2013-04-04
这篇文章主要介绍了详解webpack分离css单独打包，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
在实际业务中有的时候要取出数组中的最大值或最小值。但在数组中并没有提供arr.max()和arr.min()这样的方法。那么是不是可以通过别的方式实现类似这样的方法呢？那么今天我们就来整理取出数组中最大值和最小值的一些方法，需要的朋友一起学习吧2016-03-03
iframe自适应宽度、高度 ie6 7 8，firefox 3.86下测试通过
近期需要一个iframe自适应高度的东西，在网上找了很多，都不能用……一看大体的日期都是大概 2008年前后的其他近期的基本都是以前的转载，所以只好自己动手了。2010-07-07
最新评论