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

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

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

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

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

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

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

其属性有：

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

两者的区别是：

如图：

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

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

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

在html中textarea 的字体大小可以用“font-size”属性来修改，字体颜色可以用“color”来修改。

1、新建html文档，在body标签中添加textarea标签，然后在这个标签中输入一段文字：

2、为textarea标签添加“font-size”属性，属性值为字体的大小，这时文字将会变大：

3、为textarea标签设置“color”属性，属性值为颜色，这里以红色为例，此时的文字将会变成红色：

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<body>标签中，输入html代码：<textarea style="resize:none"></textarea>。

3、浏览器运行index.html页面，此时textarea在网页中的大小被固定不可修改。

欢迎分享，转载请注明来源：内存溢出

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