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

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

        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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐