后台渲染文章传\n前台页面不换行问题

前言

       最近工作中做到了服务端渲染的项目，也就是在后台访问数据库进行数据绑定模板渲染最后把整个页面返回给浏览器（前台）展示出来。主要目的是为了搜索引擎友好，然后就遇到了以下问题：

1.后台返回的接口数据中article字段中带有换行字符\n，显示在接口中为：

取到字段显示在页面中是几个空格但是没有换行，这个时候不懂的人就会去问后台是不是换行没传对，有时候还会被怼，谁让你比较菜呢哈哈哈哈，直接说解决方案：

给文章div设置css样式：white-space:pre-wrap;意思是保留空白符序列，但是正常地进行换行。

相关拓展：

CSS white-space 属性

定义和用法

white-space 属性设置如何处理元素内的空白。

这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

默认值：normal

继承性：yes

版本：CSS1

JavaScript 语法：object.style.whiteSpace="pre"

可能的值

值描述

normal默认。空白会被浏览器忽略。

pre空白会被浏览器保留。其行为方式类似 HTML 中的

 标签。
 
 
nowrap文本不会换行，文本会在在同一行上继续，直到遇到 
 标签为止。
 
 
pre-wrap保留空白符序列，但是正常地进行换行。
 
 
pre-line合并空白符序列，但是保留换行符。
 
 
inherit规定应该从父元素继承 white-space 属性的值。（ie8以上才支持）