在实际开发中,我们经常会遇到把后端返回的数据(比如数组里面的内容)换行展示在页面。

我们经常会这样处理,这样会在控制台输出,数据是换行展示的。

        let arr = ['张三','李四','王五'];
        console.log(arr.join('\r\n'));

但是将处理后的数据放在页面时,换行则不能生效。因为html不识别\r\n。会把其解析成空白

具体解决方法是可以给对应的div设置css。white-space可以指定元素内的空白以怎样的方式处理。

// 合并空白符序列,但是保留换行符。
white-space: pre-line;

具体运用如下 

<div style={{whiteSpace: 'pre-line'}}>{errorReason}</div>

 

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐