背景昨天产品需求评审，产品经理收到用户的反馈，在系统中有一些文本域，用户希望在在文本中填写的文本内容和格式都能够被保留下来，目前只能保存文本内容，对于文本域的换行和空格，在显示的时候都没有正确显示。
接到这个需求，我搜索了一下，网上大多数是获取文本域的内容后，将其中的换行符，空格替换成html标签，如
， 使用JavaScript处理，然后将这些数据转化后，保存的后端，在显示时，使用innerHTML来显示到一个div或p标签内。这里有一个很大的安全隐患就是，脚本注入，如果用户输入了一些script，而这些又没经过处理直接使用innerHTML显示到页面上，这是很危险的。
于是我寻求另一种解决途径。
最终我发现设置元素样式的white-space可以将文本域的换行和空格正确显示出来。
white-space 属性解释下面是white-space的几个值其及其解释
属性
换行符
空格和制表符
文字换行
行尾空格
normal
合并
合并
换行
删除
nowrap
合并
合并
不换行
删除
pre
保留
保留
不换行
保留
pre-wrap
保留
保留
换行
挂起
pre-line
保留
合并
换行
删除
break-spaces
保留
保留
换行
换行
normal连续的空白符会被合并，换行符会被当作空白符来处理。换行在填充「行框盒子(line boxes)」时是必要。
nowrap和 normal 一样，连续的空白符会被合并。但文本内的换行无效。
pre连续的空白符会被保留。在遇到换行符或者
元素时才会换行。
pre-wrap连续的空白符会被保留。在遇到换行符或者
元素，或者需要为了填充「行框盒子(line boxes)」时才会换行。
pre-line连续的空白符会被合并。在遇到换行符或者
元素，或者需要为了填充「行框盒子(line boxes)」时会换行。
break-spaces与 pre-wrap的行为相同，除了：
任何保留的空白序列总是占用空间，包括在行尾。
每个保留的空格字符后都存在换行机会，包括空格字符之间。
这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）。
演示demo此外我还专门写了一个简单的demo来演示使用white-space来正确显示文本域中的文本格式。
演示demo图片由上图可见，将元素的white-space属性设置为 space-pre，pre-wrap，pre-line，break-space 都可以获得不错的效果
demo代码代码语言：html复制
normal:
nowrap:
space-pre:
pre-wrap:
pre-line:
break-spaces:
参考文献https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space