Html中识别换行符‘\n‘

前端显示后端数据换行问题解决
当后端返回的字符串包含换行符` `时,前端使用CSS的`white-space: pre-line`属性可以正确显示换行,避免内容挤在一行,影响页面布局。在React中,可以通过在`<span>`标签中设置样式实现。

转载于:HTML文章页面,识别不了换行问题的解决

问题详情

后端返回的长串字符中是有换行符 ‘\n’的,但是前端展现该长串字符时却没有识别’\n’,挤在一行影响页面布局。

解决方案

查找相关资料后得到解决方案:CSS中由“white-space” 属性设置如何处理元素内的空白,设置元素的样式为white-space: pre-line即可解决问题。

注: 在React中这样设置该属性

<span style={{whiteSpace: 'pre-line'}} >
          // ...
      </span>