我怎样才能防止textarea超出他父母的DIV元素?(仅限谷歌浏览器问题)

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (97)

我怎样才能防止textarea超出其父DIV元素?

我把这个textarea放在一个DIV里面的表中,看起来它会导致整个表伸出它的边界。

即使在更简单的情况下,您也可以看到相同情况的示例,只需将一个文本区域放入div中即可(如www.stackoverflow.com中所用)

你可以从下面的图片中看到,textarea可以伸展超出其父级的大小?我如何防止这种情况?

我对CSS很陌生,所以我不知道应该使用哪些CSS属性。我尝试了几个像显示溢出。但他们似乎没有办法。还有什么我可能错过了?

CSS

textarea {
    max-width: 50%;
}
#container {
    width: 80%;
    border: 1px solid red;
}    
#cont2{
    width: 60%;
    border: 1px solid blue;
} ​

如果你把这段代码放在http://jsfiddle.net里面,你会发现它们的行为是不同的。虽然textarea仅限于以css风格声明的百分比,但仍有可能让它的父表达到它想要的那么大,然后你可以看到它溢出了它的父边界。有关如何解决这个问题的任何想法?

提问于
用户回答回答于

要完全禁用调整大小:

textarea {
    resize: none;
}

或者你可以限制尺寸:

textarea {
    max-width: 100px; 
    max-height: 100px;
}

要将尺寸限制为父母的宽度和/或身高:

textarea {
    max-width: 100%; 
    max-height: 100%;
}
用户回答回答于

Textarea调整大小控件可通过CSS3 resize属性获得

textarea { resize: both; } /* none|horizontal|vertical|both */
textarea.resize-vertical{ resize: vertical; }
textarea.resize-none { resize: none; }

( none禁用textarea调整大小)both,,verticalhorizontal

请注意,在Chrome,Firefox和Safari中默认为both

如果要约束textarea元素的宽度和高度,这不是一个问题:这些浏览器也很尊重max-heightmax-widthmin-height,和min-widthCSS属性提供一定比例内调整。

代码示例

#textarea-wrapper {
  padding: 10px;
  background-color: #f4f4f4;
  width: 300px;
}

#textarea-wrapper textarea {
  min-height:50px;
  max-height:120px;
  width: 290px;
}

#textarea-wrapper textarea.vertical { 
  resize: vertical;
}
<div id="textarea-wrapper">
  <label for="resize-default">Textarea (default):</label>
  <textarea name="resize-default" id="resize-default"></textarea>
  
  <label for="resize-vertical">Textarea (vertical):</label>
  <textarea name="resize-vertical" id="resize-vertical" class="vertical">Notice this allows only vertical resize!</textarea>
</div>

所属标签

可能回答问题的人

  • uncle_light

    5 粉丝518 提问8 回答
  • 嗨喽你好

    7 粉丝480 提问8 回答
  • 无聊至极

    4 粉丝504 提问6 回答
  • 人生的旅途

    10 粉丝484 提问6 回答

扫码关注云+社区

领取腾讯云代金券