textarea 仅水平调整大小 - CSS

在一些场景下，我们需要控制 textarea 只能水平调整大小，这时可以使用 CSS 进行实现。

实现方式

HTML 代码如下：

<textarea class="horizontal-resize">请输入内容</textarea>

需要给 textarea 添加一个类名 horizontal-resize，然后在 CSS 中设置如下样式：

/* 限制 textarea 只能水平调整大小 */
.horizontal-resize {
  resize: horizontal; /* 设置为 horizontal */
}

效果预览

效果如下图所示：

其他说明

• resize 属性还有其他取值：none（不可调整）、both（可水平和垂直调整）、vertical（只能垂直调整）。
• 并不是所有浏览器都支持 resize 属性，建议在使用时进行兼容性测试。
• 如果需要对多个 textarea 进行设置，可以使用通配符 *，例如 .horizontal-resize, .vertical-resize { resize: both; }。
• 除了 resize 属性，还可以使用其他 CSS 属性，如 width、max-width 等。