背景
当前端的某个表单的某个字段需要输入一大段话，并且这个表单可以被编辑的时候，就涉及到了前端内容换行的功能。
遇到这个问题是在项目中发现：在textarea组件中输入了换行，但是编辑时，显示的时候换行变成了空格。
解决
其实方法很简单，使用pre标签就可以了。
const text=(你需要展示的内容)
<pre>{text}</pre>
pre标签的介绍
- pre元素是块级元素，但是只能包含文本或行内元素。也就是说，任何块级元素（常见为可以导致段落断开的标签）都不能位于pre元素中。
- pre元素中允许的文本可以包含物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签，比如a标签放到pre块中时，就像放在HTML/XHTML文档的其他部分中一样即可。
- 制表符tab在pre标签定义的块当中可以起到应有的作用，每个制表符占据8个字符的位置，但并不推荐使用tab，因为在不同的浏览器中，tab的表现形式各不相同。在用pre标签格式化的文档段中使用空格，可以确保文本正确的水平位置。
- 如果希望使用pre标签来定义计算机源代码，比如HTML源代码，请使用符号实体来表示特殊字符。一般将pre标签与 code标签结合起来使用，以获得更加精确的语义，用于标记页面中需要呈现的源代码。
- 如果想要把某一段规定好的文本格式放在HTML中，那么就要利用pre元素的特性。
注意
在 HTML 4.01 中，"width" 属性已废弃，不可使用。 HTML5 不支持"width"属性。
新的问题
pre的内容如果过长，这个时候结合我原先的代码会把整个页面撑开，所以当pre的文本很长的时候，还需要设置一下换行相关的代码。
pre {
white-space: pre-wrap;
word-wrap: break-word;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
}
（pre 的父元素）{
overflow-x: hidden;
}
