CSS 调整大小 resize

CSS resize 属性允许你控制一个元素是否可以调整大小,以及调整大小的方式。

CSS resize 属性允许你控制一个元素是否可以调整大小,以及调整大小的方式。

resize 属性的可选值包括:

  • none: 元素不能被用户调整大小。
  • both: 允许用户在水平和垂直方向上调整元素的大小。
  • horizontal: 允许用户在水平方向上调整元素的大小。
  • vertical: 允许用户在垂直方向上调整元素的大小。

禁用元素调整大小

<textarea> 元素在某些浏览器上默认是可以调整大小的,我们可以使用 resize: none; 禁止可调整大小。

禁止 <textarea> 调整大小:

textarea {
  resize: none;
}

让元素可调整大小

仅允许用户调整 <div> 元素的宽度:

div {
  resize: horizontal;
  overflow: auto;
}

仅允许用户调整 <div> 元素的高度:

div {
  resize: vertical;
  overflow: auto;
}

允许用户调整 <div> 元素的高度和宽度:

div {
  resize: both;
  overflow: auto;
}