html - 如何从width Angular 控制textarea的可扩展性

Question

CSS

#editpro{
background:#CEEBFB;
margin-left:30px;
margin-right:500px;
text-align:center;
color:#3687cc;
font-size:20px;
border:2px ridge #3687cc;
border-radius:15px;
width:350px;
}

HTML

  <div id="editpro">
   <form>
     <label for="username">Username </label>
     <input  type="text" id="username" name="username"/><br /><br />
     <label for="password1">Password </label>
     <input  type="password" id="password1" name="password1" /><br /><br />
     <textarea id="myTextarea" style="width:320px"></textarea>
     <input type="submit" value="submit"/>
   </form>
  </div>

这是我的页面，每当我尝试扩展文本区域时，在高度方面，我都没有遇到任何问题，但是当我尝试在宽度方面拉伸(stretch)它时，它会溢出 div editpro .

我如何控制这种可扩展性，因为宽度规范似乎无法控制它的溢出。

Answer 1

要禁用文本区域的可调整大小功能，请使用

textarea {resize:none} /* completely disable resize */
textarea {resize:vertical} /* disable horizontal resize */
textarea {resize:horizontal} /* disable vertical resize */

参见:http://dev.l-c-n.com/form-controls/resize_textarea.html

但是请记住，这可能会让您的用户感到厌烦。调整文本区域的大小现在是 UI 的一部分，就像滚动条或缩放文本一样。通过破坏 UI 的这一方面，您已经从用户手中夺走了一些控制权，这可能会令人沮丧。考虑是否有必要 - 毕竟，如果用户调整框的大小会破坏您的布局或看起来很有趣，他们不会反对您 - 他们知道他们对页面做了一些事情并且不会感到困惑。