后端返回文本换行处理

设置white-space可以处理元素内的空白

white-space:pre-line;

为什么要设置white-space

在html中，特殊含义的符号不能直接使用， 需要使用转义字符串（Escape Sequence）才能使用。

当后端没有使用富文本编辑器，直接在<textarea> 标签内编辑、保存了一篇文本，文本中使用了多个回车换行，返回给前端显示，前端获取到的文本中有很多&#开头，;号结尾的符号，这就是转义字符。

浏览器默认忽略这些转义字符。

第一段文本
第二段 1个空格间隔 文本
第三段  2个空格间隔  文本     5个空格间隔     文本

前端把这篇文本放在 <p></p>标签内显示：

打开浏览器，显示的页面并没有重现换行效果，文本的CSSwhite-space属性默认值为normal，空白符换行符等会被浏览器忽略。

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

把文本放在<p style="white-space: pre-line;></p>内显示：

把文本放在<p style="white-space: pre-wrap;></p>内显示：

总结

文本属性white-space的值为pre-line，多个空格将合并成一个；

文本属性white-space的值为pre-wrap，浏览器保留所有空格；