Html—让textarea标签中的内容原格式输出的两种办法

在没有使用编辑器而是使用了文本域<textarea>的情况下，用户所输入的内容呈现的效果并不理想，比如：原本的换行没有保留，全部成了单行显示。

要让在<textarea>中输入的内容原格式输出有一下两种办法：

方法一： 使用 <pre> 标签

使用<pre>标签是我最开始采用的办法，但是这种方法也有一定的缺陷,比如说我们在使用的编辑器的时候，换行、Tab、空格都会影响到输出结果。如图：

001.png

并且，<pre>标签本身自带得有一些样式，比如字体等。如果你的页面有引入bootstrap等css框架，那么受样式影响就更多了，你得再写去覆盖。

因此，这种方法并不推荐。

方法二：使用css white-space

我们先来看一下white-space的定义和属性：

white-space属性指定元素内的空白怎样处理。

其属性有：

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

也就是说，我们可以使用white-space:pre-warp或white-space:pre-line达到我们想要的效果。

两者的区别是：

• white-space:pre-warp输入多少空格都会输出的时候就带几个空格。
• white-space:pre-line无论输入多少空格都会输出的时候就带几个空格，会合并为一个。

如图：

white-space:pre-warp效果如下：

002.png

white-space:pre-line效果如下：

003.png

因此，更推荐使用第二种方法。