关于CSS：如何防止文本区域超出其父DIV元素？ (仅限google-chrome问题)


How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)

如何防止文本区域超出其父DIV元素？

我在DIV内的表中有此textarea，看来这会导致整个表超出其范围。

您甚至可以在更简单的情况下看到相同情况的示例，只需在div内放置一个文本区域即可(例如www.stackoverflow.com中使用的文本区域)

您可以从下面的图片中看到文本区域可以扩展到其父区域之外的大小吗？我该如何预防？

我是CSS的新手，所以我真的不知道应该使用什么CSS属性。我尝试了几种类似的显示，并且溢出。
但是他们似乎并不能解决问题。
我可能还错过了什么？

the div section

the text area

更新：
HTML

CSS

1
2
3
4
5
6
7
8
9
10
11
textarea {
    max-width: 50%;
}
#container {
    width: 80%;
    border: 1px solid red;
}    
#cont2{
    width: 60%;
    border: 1px solid blue;
} ?

如果将此代码放在http://jsfiddle.net中，
您会发现他们的行为有所不同。尽管textarea仅限于以css样式声明的百分比，但仍然有可能使它的父表达到想要的大小，然后您可以看到它溢出了父边界。
有关如何解决此问题的任何想法？
？

相关讨论

要完全禁用调整大小：

1
2
3
textarea {
    resize: none;
}

只允许垂直调整大小：

1
2
3
textarea {
    resize: vertical;
}

只允许水平调整大小：

1
2
3
textarea {
    resize: horizontal;
}

或者您可以限制大小：

1
2
3
4
textarea {
    max-width: 100px;
    max-height: 100px;
}

将大小限制为父母的宽度和/或高度：

1
2
3
4
textarea {
    max-width: 100%;
    max-height: 100%;
}
相关讨论

可通过CSS3 resize属性使用Textarea调整大小控件：

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

允许的值不言自明：none(禁用调整文本区域的大小)，both，vertical和horizontal。

请注意，在Chrome，Firefox和Safari中，默认值为both。

如果要限制textarea元素的宽度和高度，这不是问题：这些浏览器还尊重max-height，max-width，min-height和min-width CSS属性，以在一定比例内提供大小调整。

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#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;
}
1
2
3
4
5
  <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>

相关讨论

我希望您遇到的问题与我一样...我的问题很简单：在容器内制作一个固定百分比的固定文本区域(我是CSS / JS / HTML的新手，所以如果我愿意(不要正确使用术语)，这样无论显示设备是什么，填充容器(表格单元)的盒子都会占用正确的空间。这是我解决的方法：

1
2
3
4
5
6
7
8
<table width=100%>
    <tr class="idbbs">
        B.S.:
    </tr></br>
    <tr>
        <textarea id="bsinpt"></textarea>
    </tr>
</table>

然后CSS看起来像这样...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#bsinpt
{
    color: gainsboro;
    float: none;
    background: black;
    text-align: left;
    font-family:"Helvetica","Tahoma","Verdana","Arial Black", sans-serif;
    font-size: 100%;
  position: absolute;
  min-height: 60%;
  min-width: 88%;
  max-height: 60%;
  max-width: 88%;
  resize: none;
    border-top-color: lightsteelblue;
    border-top-width: 1px;
    border-left-color: lightsteelblue;
    border-left-width: 1px;
    border-right-color: lightsteelblue;
    border-right-width: 1px;
    border-bottom-color: lightsteelblue;
    border-bottom-width: 1px;
}

很抱歉这里的草率代码块，但我必须向您展示重要的内容，而且我不知道如何在此网站上插入带引号的CSS代码。无论如何，为了确保您了解我在说什么，这里重要的CSS缩进了一些...

然后，我所做的工作(如此处所示)非常具体地调整了百分比，直到无论使用什么设备屏幕，我都找到了最适合显示的百分比。

当然，我认为"调整大小：无；"是过大的，但比后悔要安全得多，现在，消费者将无须调整盒子的大小，也不管他们从哪个设备观看它。

效果很好。

1
2
3
4
textarea {
width: 700px;  
height: 100px;
resize: none; }

assign your required width and height for the textarea and then use.
resize: none ; css property which will disable the textarea's stretchable property.

相关讨论