如何确保 Textarea 字段的高度和宽度都增长？-解网

问：

我是 Web 开发的初学者，我正在开发一个网站，并且有一个 Textarea 字段，我想用它来允许用户编写更长的文本。我应用了CSS样式，使字段的高度随着用户输入更多文本而增加，这非常有效。但是，当用户将文本区域拖动到右侧时，我无法确保容器的宽度也增加。保存 Textarea 字段的容器不会自动调整其宽度以容纳文本，并且 Textarea 字段会溢出到容器之外。[见图]

.container {
  max-width: 600px;
  margin: 300px auto 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.container>* {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.postForm {
  box-sizing: border-box;
}

<div class="container">
  <div class="postForm">
    <form>
      <textarea id="description" name="description" placeholder="Tell us about your post..."></textarea>
    </form>
  </div>
</div>

如何确保在调整 Textarea 字段大小时容器的宽度也会增加？

我以为盒子大小：border-box;它会起作用，但不幸的是它不起作用。我应该改变什么？

HTML CSS 文本区域边框框

我会向您提交向 textarea 元素添加最大宽度。这样一来，textarea 的大小确实会超过父容器，但如果您希望用户调整尽可能多的大小，则可以在 textarea 的父容器上放置溢出以适应长度。我对现有代码进行了修改，以显示这两种情况。

.container {
  max-width: 600px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.container>* {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

textarea{
 max-width:100%;
}

.overflow { overflow:scroll }

<div class="container">
  <div class="postForm">
    <form>
      <textarea id="description" name="description" placeholder="Tell us about your post..."></textarea>
    </form>
  </div>
</div>

<div class="overflow">
  <textarea id="description" name="description" placeholder="Tell us about your post..."></textarea>
</div>

上一个：如何在 react 的 textarea 中语法高亮

下一个：我正在创建一个文本区域，它允许用户用印地语输入。但是当我输入文本区域时，它没有显示印地语文本

如何确保 Textarea 字段的高度和宽度都增长？

How can I ensure a Textarea field grows in both height and width?

评论