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

HTML CSS

JinJin

2020-03-23

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

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

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

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

通常如何做？

第2892篇《我是否应该使用CSS width / height或HTML cols / rows属性设置文本区域的大小？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共8个回答
樱 2020.03.23

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

@media print { 
textarea {
min-height: 900px;  
}
}
乐米亚 2020.03.23

我通常不指定height，但指定width: ...and rows和cols。

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

（（同时指定两者rows，height感觉有点像我想复制数据吗？）

达蒙 2020.03.23

对于文本区域，我们可以使用下面的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

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

伽罗 2020.03.23

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

DavaidTony宝儿 2020.03.23

在HTML集中

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

在CSS集中 

textarea { height: auto; }

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

JinJin 2020.03.23

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

猪猪 2020.03.23

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

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android