我是否应该使用CSS width / height或HTML cols / rows属性设置文本区域的大小?

每次我开发包含的新表格时,textarea当我需要指定尺寸时都会遇到以下难题:

使用CSS或使用textarea的属性cols以及rows

每种方法的优缺点是什么?

使用这些属性的语义是什么?

通常如何做?

2020/03/23 15:09:51

文本区域的主要特征是它们是可扩展的。在网页上,如果文本长度超出了您设置的空间(使用行或使用CSS的空间),这可能会导致滚动条出现在文本区域上。当用户决定打印时,尤其是使用“打印”为PDF-因此,使用条件CSS规则为打印的文本区域设置一个舒适的最小最小高度:

@media print { 
textarea {
min-height: 900px;  
}
}
乐米亚2020/03/23 15:09:51

我通常不指定height,但指定width: ...and rowscols

通常,在我的情况下,仅widthrows需要,文本区域相对于其他元素看起来不错。cols如其他答案所述,如果有人不使用CSS,是一个后备方法。)

((同时指定两者rowsheight感觉有点像我想复制数据吗?)

达蒙2020/03/23 15:09:51

对于文本区域,我们可以使用下面的CSS来固定大小

    <textarea  class="form-control" style=" min-width:500px; max-width:100%;min-height:50px;height:100%;width:100%;" ></textarea>

在angularjs和angular7中测试

十三2020/03/23 15:09:51

根据w3c,cols和row都是textareas必需的属性。行和列是要适合文本区域的字符数,而不是像素或其他可能的任意值。与行/列。

伽罗2020/03/23 15:09:51

答案是“是”。也就是说,您应该同时使用两者。没有行和列(即使没有显式使用它们也有默认值),如果CSS被用户样式表禁用或覆盖,则文本区域将变得很小。始终牢记可访问性问题。就是说,如果允许样式表控制文本区域的外观,则通常会得到看起来更好的东西,可以很好地适合整个页面设计,并且可以调整大小以跟上用户输入(当然,在好味道的范围内)。

DavaidTony宝儿2020/03/23 15:09:51

在HTML集中

<textarea rows="10"></textarea>

在CSS集中

textarea { height: auto; }

这将触发浏览器将textarea的高度精确设置为行数加上周围的填充。将CSS高度设置为精确的像素数量会留下任意空格。

JinJin2020/03/23 15:09:51

文本区域的大小可以由cols和rows属性指定,甚至更好;通过CSS的height和width属性。所有主要浏览器均支持cols属性。一个主要区别是<TEXTAREA ...>容器标记:它具有开始标记()。

猪猪2020/03/23 15:09:51

我建议同时使用。如果客户端不支持CSS,则行和列是必需且有用的。但是作为一名设计师,我将它们改写成我想要的尺寸。

推荐的方法是通过外部样式表,例如

textarea {
  width: 300px;
  height: 150px;
}
<textarea> </textarea>