每次我开发一个包含文本区域的新表单时,当我需要指定它的尺寸时,我都有以下困境:
使用CSS或使用文本区域的属性cols和行?
每种方法的优缺点是什么?
使用这些属性的语义是什么?
通常是怎么做的?
每次我开发一个包含文本区域的新表单时,当我需要指定它的尺寸时,我都有以下困境:
使用CSS或使用文本区域的属性cols和行?
每种方法的优缺点是什么?
使用这些属性的语义是什么?
通常是怎么做的?
当前回答
对于文本区域,我们可以使用下面的css来固定大小
<textarea class="form-control" style=" min-width:500px; max-width:100%;min-height:50px;height:100%;width:100%;" ></textarea>
在angularjs和angar7中测试
其他回答
我通常不指定高度,但会指定宽度:……还有一排排和cols。
通常,在我的情况下,只需要宽度和行,textarea看起来很好,相对于其他elems。(如果有人不使用CSS, cols是一个备用方案,正如在其他答案中解释的那样。)
((同时指定行和高度感觉有点像复制数据吗?))
文本区域的一个主要特征是它们是可扩展的。在网页上,如果文本长度超过了你设置的空间(无论是使用行还是使用CSS),就会导致文本区域出现滚动条。这可能是一个问题,当用户决定打印,特别是“打印”到PDF -所以设置一个舒适的大最小高度打印文本区域的CSS条件规则:
@media print {
textarea {
min-height: 900px;
}
}
对于文本区域,我们可以使用下面的css来固定大小
<textarea class="form-control" style=" min-width:500px; max-width:100%;min-height:50px;height:100%;width:100%;" ></textarea>
在angularjs和angar7中测试
CSS
input
{
width: 300px;
height: 40px;
}
HTML
<textarea rows="4" cols="50">HELLO</textarea>
HTML行和cols没有响应!
我用CSS定义了大小。提示:如果你为手机定义了一个小尺寸,可以考虑使用textarea:focus {};
在这里添加一些额外的空间,它只会在用户真正想要写一些东西的时候展开