问题描述
最近在项目上遇到一个文案显示的相关问题：用户在输入文字时用了回车换行，后台存储以后，在页面回显时，并未如愿进行换行，而是把回车符当作了空格处理。
场景
- 聊天室即时输入后即时显示，譬如类似微信聊天的场景内
- 前端在展示某些文章时，段落文字的显示
原因分析
控制台打印(console)回显的文字，发现服务端存的回车是 ↵ 符号，页面在进行解析-反编译-渲染的时候，把 ↵符号 解析成了空格进行渲染，对这个 ↵ 符号的处理，成了问题关键
解决办法
-
首先想到的办法，就是利用 js 正则 ，把 ↵ 替换成< br/>换行符，进行 html解析，貌似可行，实验了一下确实可以。但是如果文案内容过长，信息量过大时，这种方法的可行性，显然不高。
-
在查阅资料时，无意中看到 MDN Web 文档， white-space 可以处理段落文字中的空格、回车符、制表符等符号，赶紧研究。<如果能用css解决的问题，傻子才会用js进行解决，哈哈>
| 属性值 | 回车是否换行 | 解释 |
|---|---|---|
| normal | 是 | 空格和回车换行都会被浏览器忽略 |
| nowrap | 否 | 文本不会换行，文本会在在同一行上继续，直到遇到换行符< br />标签为止 |
| break-spaces | 是 | 会换行，空格不会合并(不管是行首还是行尾，敲几个空格，就是几个空格)，但是不会超出盒子大小。换行时，单词不会拆开，会保留完整单词再换行。 |
| pre | 是 | 只有遇到回车(换行符)时才会换行，否则不会换行 |
| pre-wrap | 同break-spaces | 同break-spaces |
| pre-line | 是 | 连续的空格会被合并(行内多个连续的空格会被合并成一个空格，行首行尾空格会被直接忽略) |
总结
white-space 的默认值是 normal，在不对 white-space 重新赋值的情况下，页面渲染时默认把空格和回车都忽略了，所以就出现了页面回显文字时不换行的问题，把 white-space 赋值为 pre-line 就可以轻松解决这个问题了！
对标 微信PC版，发会现，在行首或者行尾输入一堆空格，回显时，却被忽略了，那我们可以大胆猜测，在页面进行回显时，是否用的就是 pre-line 呢？^_^
