我遇到textarea max-width的问题,在调整大小时我需要它不超过 .table-cell.two 宽度,在这个例子中:
HTML:
<div class="wrapper">
<div class="table">
<div class="table-cell one">
<p>small cell</p>
</div>
<div class="table-cell two">
<p>textarea cell</p>
<textarea></textarea>
</div>
</div>
CSS:
textarea {
max-width: 100%;
}
.wrapper {
width: 500px;
}
.table {
display: block;
width: 100%;
}
.table-cell {
display: table-cell;
background: #E2D8C1;
vertical-align: top;
padding: 10px;
}
.table-cell.two {
width: 100%;
background: #DAC082;
}
.table textarea {
max-width: 100%;
width: 100%;
height: 100px
}
请不要建议使用javascript,需要一个纯粹的CSS解决方案。
答案 0 :(得分:52)
使用:
textarea {
/* will prevent resizing horizontally */
resize:vertical;
}
答案 1 :(得分:5)
我也有这个问题。解决方案非常简单,但我花了几个小时进行实验...在textarea元素类/#元素样式定义中使用这两个参数同时(90%30%是示例值):< / p>
.textarea {
width:90%;
max-width:90%;
max-height:30%;
}
答案 2 :(得分:3)
默认情况下,文本区域可以调整大小。如果要增加元素宽度,可以通过
进行<textarea rows="4" cols="50">Content here</textarea>
max-width: 300px;
max-height:300px
jsfiddle上的演示
在您的情况下,您希望在父级没有固定大小时修复<textarea>
大小。
答案 3 :(得分:0)
对于textarea,您可以设置
<textarea rows="5"></textarea>
和css
textarea { height: auto; }