首先前端输入文章的地方加入<pre></pre> 这样他自动保存空格换行
![](https://img-blog.csdnimg.cn/img_convert/faa31868b88d482c4572468a75e80424.png)
存入数据库
![](https://img-blog.csdnimg.cn/img_convert/e32130d7e46d39721ef84fb504e7928b.png)
然后取出来看看长啥样,可以看到换行的地方就是\n
![](https://img-blog.csdnimg.cn/img_convert/7c6c83e127280b23d29444a7da634165.png)
直接拿到前端看看长啥样,会发现全堆在一起没有换行
![](https://img-blog.csdnimg.cn/img_convert/c682aa7e5083b3e35002cfb971728d02.png)
可以看到文章内容没有格式,为什么呢?因为浏览器的CSS元素默认为white-space:normal 空白会被浏览器忽略。所以修改成white-space:pre-line,合并空白符序列,但是保留换行符
![](https://img-blog.csdnimg.cn/img_convert/020b0c6459a8d64b8bb9b13a684ba44a.png)
最后展示:
![](https://img-blog.csdnimg.cn/img_convert/d65ecf9c84c76942eb45fc2a915646ad.png)
最后:点赞评论转发收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏