如何防止文本区域延伸到其父DIV元素之外?
我将这个文本区域放在一个表中,这个表在一个DIV中,它似乎导致整个表都超出了它的界限。
即使在更简单的情况下,您也可以看到相同情况的示例,只需在div中放置一个文本区域(就像这里在www.stackoverflow.com中使用的一样)。
你可以从下面的图片中看到文本区可以延伸到超过其父区域的大小?我如何防止这种情况发生?
我是CSS的新手,所以我真的不知道我应该使用什么CSS属性。我尝试了几个类似的显示,并溢出。但他们似乎并没有做到这一点。还有什么我可能错过的吗?
更新: HTML
CSS
textarea {
max-width: 50%;
}
#container {
width: 80%;
border: 1px solid red;
}
#cont2{
width: 60%;
border: 1px solid blue;
}
如果您将此代码放在http://jsfiddle.net中,您将看到它们的行为不同。尽管textarea被限制为在其css样式中声明的百分比,但仍然可以让它使其父表尽可能大,然后您可以看到它溢出了其父边框。对如何解决这个问题有什么想法吗?
发布于 2010-10-10 15:52:19
要完全禁用调整大小,请执行以下操作:
textarea {
resize: none;
}
要仅允许垂直调整大小:
textarea {
resize: vertical;
}
仅允许水平调整大小的步骤:
textarea {
resize: horizontal;
}
或者,您可以限制大小:
textarea {
max-width: 100px;
max-height: 100px;
}
要将大小限制为父项宽度和/或高度,请执行以下操作:
textarea {
max-width: 100%;
max-height: 100%;
}
发布于 2015-07-18 13:02:35
我希望你有和我一样的问题...我的问题很简单:在容器中创建一个带有锁定百分比的固定文本区域(我是CSS/JS/HTML的新手,如果我没有正确使用行话,请耐心等待),这样无论它显示在哪个设备上,填充容器的框(表格单元格)都会占用正确的空间量。下面是我解决这个问题的方法:
<table width=100%>
<tr class="idbbs">
B.S.:
</tr></br>
<tr>
<textarea id="bsinpt"></textarea>
</tr>
</table>
那么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;
}
很抱歉在这里草率的代码块,但我必须告诉你什么是重要的,我不知道如何在这个网站上插入引用的CSS代码。在任何情况下,为了确保你明白我在说什么,重要的CSS在这里不是很缩进……
然后我所做的(如这里所示)是非常明确地调整百分比,直到我找到完全适合显示的百分比,无论使用的是什么设备屏幕。
诚然,我认为" resize : none;“有点夸张,但比抱歉更安全,而且现在消费者将不再需要调整盒子的大小,也不会影响他们从什么设备上观看。
它工作得很好。
https://stackoverflow.com/questions/3899463
复制相似问题