如何在CSS中调整textarea的大小？

这是一个关于如何在html和css中调整textarea的大小的css简短教程。

在这篇文章中，你将学到以下内容

• 如何用css/html禁止调整textarea的大小
• 如何禁止水平调整textarea的大小
• 禁用调整textarea的垂直大小

TextArea 是一个Input 元素和 sizer。sizer允许支持多行文本，并可在水平和垂直方向调整大小。

文本区可以用行和列来创建

默认情况下，文本区可以通过点击右下角或拖动鼠标来调整大小。 textarea-resize.png

如何禁用文本区的可调整大小？

我们有多种方法可以实现

• 在CSS中使用resize属性
• 在CSS中使用最大和最小宽度高度
• 在HTML中使用dragable属性

调整大小属性

有时，你需要固定的文本区，它是不可调整大小的。你如何禁止调整大小？你可以在css中使用resize:none 属性，用于textarea 元素。resize是一个属性，用于使一个给定的html元素可调整大小或不可调整大小。resize属性的可能值是

none：禁止调整大小both ：可以在水平和垂直方向上调整大小horizontal ：在水平方向上调整大小，高度是固定的vertical ：只在垂直方向上调整大小，宽度是固定的

• 使用class 属性（.）。

  如果textarea是用class 属性声明的，你可以选择这个选项

.descriptionStyle{
    resize:none;
}

其中descriptionStyle 被声明为class 属性的一个值。

这种方法的唯一缺点是它支持所有的browsers ，除了Internet explorer 。

所有浏览器都支持使用最大和最小宽度

这是一个css修改，将宽度和高度应用于以下属性的固定像素。

• 最大高度
• 最小高度
• 最大宽度
• 最小宽度

textarea{
    max-width: 200px;
    min-width:200px;
    min-height:200px;
    max-height: 200px;
}

Sizer 在textarea上是禁用的。

它支持所有最新和旧有的浏览器的所有版本

可拖动的HTML属性

HTML 5在textarea标签中提供了draggable 属性。

draggable 允许你用布尔值调整大小或不调整， 是默认值。true

Sizer 在这种情况下，textarea上的属性被移除。

draggable是HTML 5的特性，因此它只支持最新的浏览器chrome、safari、firefox等。

如何在css中调整被禁用的垂直textarea的大小

由于css中的调整大小提供了使文本在水平方向上可调整大小，而元素的高度是固定的。垂直方向的调整是无效的。

textarea {
  resize: horizontal;
}

Sizer 在textarea上只允许水平方向的大小调整。

如何在css中调整水平方向上禁用textarea的大小？

在这里，调整值被改为垂直，宽度是固定的，水平调整被禁用。

textarea {
  resize: vertical;
}

Sizer 在textarea上只允许垂直方向调整大小。

结论

总结一下，我们已经学会了如何通过多种方式禁用文本区的大小调整

首先，使用CSS中的resize属性，除了所有的浏览器外，在IE中没有支持。第二，使用最大和最小的宽度和高度，支持所有的浏览器。最后，使用html中的dragable属性，只支持最新的浏览器。