使用文本域添加的信息，H5页面数据不换行

最新推荐文章于 2024-03-20 20:22:04 发布

原创最新推荐文章于 2024-03-20 20:22:04 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #前端

本文档探讨了在管理后台使用文本域配置数据时遇到的H5页面展示信息不换行的问题。主要原因是H5页面未正确处理换行。解决方案包括通过CSS设置`white-space: pre-line;`或使用正则表达式替换换行符为`<br/>`。这两种方法都能确保文本在H5页面上正确换行显示。

项目场景：

在管理后台使用文本域配置数据，H5页面展示的信息不换行

问题描述

在管理后台使用文本域添加信息时换行了，但是H5页面展示的信息不换行

原因分析：

H5页面未做数据的换行处理

解决方案：

1、使用css处理
在结果所在的 div 的 css 设置：
white-space: pre-line;
然后页面就能成功识别 ‘\n’ ，并换行显示

2、定义方法正则替换

//定义方法
//var pretext='第一行\n\n第二行'
preText (pretext) {
    return pretext.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ')
}
//使用（react）
<div dangerousSetInnerHTML={{__html: this.preText(textCotent)}}/>