前端处理惩罚文本换行展示4种处理惩罚方法

目录

• 前言：
• 方法一：
• 方法二：
• 方法三：
• 方法四：
• 总结

前言：

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

方法一：

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

方法二：

使用

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

方法三：

white-space样式

• pre-wrap:一连的空缺符会被保留。在遇到换行符大概< br >元素，大概须要为了填充「行框盒子(line boxes)」时才会换行。
• pre-line一连的空缺符会被归并。在遇到换行符大概< br >元素，大概须要为了填充「行框盒子(line boxes)」时会换行。

方法四：

(下面是在Vue中实现的，所有框架思想一样)

总结

到此这篇关于前端处理惩罚文本换行展示4种处理惩罚方法的文章就先容到这了,更多相干前端处理惩罚文本换行内容请搜刮脚本之家以前的文章或继承浏览下面的相干文章希望大家以后多多支持脚本之家！