CSS 如何防止 textarea 超出其父 DIV 元素？（仅限谷歌浏览器问题）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3899463/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)
提问by Itay Levin
How can I prevent the textarea from stretching beyond its parent DIV element?
如何防止 textarea 超出其父 DIV 元素？
I have this textarea inside a table which is inside a DIV and it seems that it causes the entire table to stretch out of its bounds.
我在一个 DIV 内的表格中有这个 textarea，它似乎导致整个表格超出其边界。
You can see an example of the same situation even in a more simple case, just putting a text area inside a div (like what is used here in www.stackoverflow.com)
即使在更简单的情况下，您也可以看到相同情况的示例，只需在 div 中放置一个文本区域（就像在 www.stackoverflow.com 中使用的那样）
You can see from the images below that the textarea can stretch beyond the size of its parent? How do I prevent this?
您可以从下面的图片中看到 textarea 可以拉伸超出其父级的大小吗？我如何防止这种情况？
I'm kind of new to CSS so I don't really know what CSS attributes should I be using. I tried several like display, and overflow. But they don't seem to do the trick. Anything else I might have missed?
我对 CSS 有点陌生，所以我真的不知道我应该使用什么 CSS 属性。我尝试了几个像display和overflow。但他们似乎并没有做到这一点。还有什么我可能错过的吗？
UPDATE: HTML
更新：HTML
CSS
CSS
textarea {
max-width: 50%;
}
#container {
width: 80%;
border: 1px solid red;
}
#cont2{
width: 60%;
border: 1px solid blue;
} ?
If you put this code inside the http://jsfiddle.net, you will see that they act differently. Although the textarea is limited to the percentage declared in its css style, it is still possible to get it to cause its parent table to be as large as it wants to be, and then you can see that it spills over its parent border. Any thoughts on how to fix this? ?
如果您将此代码放在http://jsfiddle.net 中，您会看到它们的行为有所不同。虽然textarea被限制在它的css样式中声明的百分比，但是还是有可能让它让它的父表像它想要的一样大，然后你可以看到它溢出了它的父边框。关于如何解决这个问题的任何想法？?
回答by Māris Kise?ovs
To disable resizing completely:
要完全禁用调整大小：
textarea {
resize: none;
}
To allow only vertical resizing:
只允许垂直调整大小：
textarea {
resize: vertical;
}
To allow only horizontal resizing:
仅允许水平调整大小：
textarea {
resize: horizontal;
}
Or you can limit size:
或者您可以限制大小：
textarea {
max-width: 100px;
max-height: 100px;
}
To limit size to parents width and/or height:
将尺寸限制为父级宽度和/或高度：
textarea {
max-width: 100%;
max-height: 100%;
}
回答by Yosvel Quintero Arguelles
Textarea resize controlis available via the CSS3 resize property:
Textarea 调整大小控制可通过CSS3 resize 属性获得：
textarea { resize: both; } /* none|horizontal|vertical|both */
textarea.resize-vertical{ resize: vertical; }
textarea.resize-none { resize: none; }
Allowable values self-explanatory: none(disables textarea resizing), both, verticaland horizontal.
允许值不言自明：（none禁用 textarea 调整大小）both、vertical和horizontal。
Noticethat in Chrome, Firefox and Safari the default is both.
请注意，在 Chrome、Firefox 和 Safari 中，默认值为both.
If you want to constrain the width and height of the textarea element, that's not a problem: these browsers also respect max-height, max-width, min-height, and min-widthCSS properties to provide resizing within certain proportions.
如果要约束textarea元素的宽度和高度，这不是一个问题：这些浏览器也很尊重max-height，max-width，min-height，和min-widthCSS属性提供一定比例内调整。
Code example:
代码示例：
#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>回答by Siddhartha Chowdhury
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.
为 textarea 分配所需的宽度和高度，然后使用。 调整大小：无；css 属性将禁用 textarea 的拉伸属性。
回答by Steven L
I'm hoping you are having the same problem that I had... my issue was simple: Make a fixed textarea with locked percentages inside the container (I'm new to CSS/JS/HTML, so bear with me, if I don't get the lingo correct) so that no matter the device it's displaying on, the box filling the container (the table cell) takes up the correct amount of space. Here's how I solved it:
我希望你有同样的问题，我有......我的问题很简单：做一个固定的textarea与容器里面反锁百分比（我是新来的CSS / JS / HTML，所以忍耐一下，如果我不要正确使用术语），以便无论它显示在什么设备上，填充容器（表格单元格）的框都会占用正确的空间。这是我解决它的方法：
<table width=100%>
<tr class="idbbs">
B.S.:
</tr></br>
<tr>
<textarea id="bsinpt"></textarea>
</tr>
</table>
Then CSS Looks like this...
然后 CSS 看起来像这样......
#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;
}
Sorry for the sloppy code block here, but I had to show you what's important and I don't know how to insert quoted CSS code on this website. In any case, to ensure you see what I'm talking about, the important CSS is less indented here...
很抱歉这里有草率的代码块，但我必须向您展示什么是重要的，我不知道如何在这个网站上插入引用的 CSS 代码。在任何情况下，为了确保您明白我在说什么，重要的 CSS 在这里缩进较少......
What I then did (as shown here) is very specifically tweak the percentages until I found the ones that worked perfectly to fit display, no matter what device screen is used.
然后我所做的（如此处所示）非常具体地调整百分比，直到我找到那些完美地适合显示的百分比，无论使用什么设备屏幕。
Granted, I think the "resize: none;" is overkill, but better safe than sorry and now the consumers will not have anyway to resize the box, nor will it matter what device they are viewing it from.
当然，我认为“调整大小：无；” 是矫枉过正，但总比抱歉更安全，现在消费者无论如何都不必调整盒子的大小，他们从什么设备查看它也无关紧要。
It works great.
它工作得很好。
