使用pre标签实现html识别文本中换行符,内容超出时并支持自动换行

<pre>
1：第一行文字第一行文字第一行文字第一行文字第一行文字第一行文字第一行文字
2：第二行文字第二行文字第二行文字第二行文字第二行文字第二行文字第二行文字
3：第三行文字第三行文字第三行文字第三行文字第三行文字第三行文字第三行文字
4：第四行文字第四行文字第四行文字第四行文字第四行文字第四行文字第四行文字
</pre>

pre {
    font-family: "微软雅黑";
    white-space: pre-wrap;
    word-wrap: break-word;
}

pre元素可自定义预格式化的文本，pre标签内的文本通常会保留空格和换行符。

当在文本输入框textarea标签里输入换行文本后查看文本却发现没有换行显示，这是就需要用到<pre></pre>标签了，但即使保留了换行符，当内容过长时却没有自动换行，导致内容溢出，所以需要给pre标签添加white-space属性。

CSS的white-space属性用于指定如何处理容器中的空白字符。

white-space出自CSS1，适用于块状元素，具有继承性，支持IE 5.5+、Chrome、FireFox、Safari、Opera等所有主流浏览器，其默认值为normal。

我们来看一下white-space可选的属性值：

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

注：所有浏览器都支持 white-space 属性。
       任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

再来看下word-wrap可选的属性值：

值	描述
normal	只允许在断字点换行（浏览器保持默认处理）。
break-word	在长单词或URL地址内部进行换行。