解决文本、字符串显示中不识别空格和换行的问题

前言：在日常开发中，我们经常遇见输入框或者文本展示时，需要文本或者字符串保持原本的格式，其中重点包括 前后空格以及中间换行的问题，在 React 中直接展示文本时，会直接去掉前后空格以及换行的问题。

而平时在开发时，偶尔需要用前后的空格或者换行去占位，来简单粗暴的完善格式问题。

举例：

 1.简单的文本显示  代码仅仅展示效果

<div>    文本显示   格式如下    </div>    
// 实际输出 '文本显示    格式如下'
// 想要的效果 '    文本显示    格式如下    '

2.变量的显示

const  a='    艾欧尼亚！
                 昂扬不灭！
                    洛克萨斯即将崛起！'
 <div>{a}</div>  
 //实际输出   '艾欧尼亚！昂扬不灭！洛克萨斯即将崛起！'  
 //想要的效果  '    艾欧尼亚！
                 昂扬不灭！
                    洛克萨斯即将崛起！' 

等等很多实现的效果，都会被浏览器忽略。

因此！！! 为了解决这个问题我们只需要给他的盒子添加一个样式属性即可完成效果展示。

white-space: pre-wrap;//解决 React 中的字符串不识别换行和多个空格的问题。

成功帮助解决问题了记得回来点个赞呀！！ 

扩展属性介绍 ：来源于 CSS white-space 属性

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

white-space属性
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。