前端页面对后端数据的换行显示

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/cc18868876837/article/details/85138793

有时我们会遇到这种情况，后端传递了一大段包含了回车符的文本内容，在React中，我们直接将这部分内容展示的话，并不会出现换行的效果。如下例子：

/* content为从后端获取的数据，例如：
 content=`hello world！
  		hello world！hello world！
		hello world！hello world！hello world！`
*/
<div>
	{content}
</div>

此时在浏览器中的显示效果如下图所示：

可以看到，页面显示并未换行。

解决方法:

方法一： 通过给React元素设置 dangerouslySetInnerHTML 属性来实现，如下：

<div dangerouslySetInnerHTML={{__html: String(content).replace(/[\r\n]/g, '<br/>')}}>
</div>

这个方法通过正则表达式String(content).replace(/[\r\n]/g, '<br/>')将content中的换行替换为html中的 <br/>，在浏览器中的显示效果如下所示：

此时有换行效果了。这里dangerouslySetInnerHTML的具体用法不详细讲述，有兴趣的可以自己去搜索。

方法二： 通过设置CSS的 white-space 属性来实现，如下：

//HTML
<div className={styles.content}>
	{content}
</div>

//CSS
.content {
	white-space: pre-line;
}

这个方法通过添加包裹文本内容的元素的css样式white-space: pre-line即可实现浏览器中显示换行。显示效果和方法一中的结果一样，对white-space: pre-line属性感兴趣的也可以自己去搜索，这里也不详细展开。

总结：推荐使用方法二来实现。