我应该使用 CSS 宽度/高度或 HTML cols/rows 属性来调整文本区域的大小吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3896537/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Should I size a textarea with CSS width / height or HTML cols / rows attributes?
提问by Pherrymason
Every time I develop a new form that includes a textareaI have the following dilemma when I need to specify its dimensions:
每次我开发一个包含 a 的新表单时，textarea当我需要指定其维度时，我都会遇到以下困境：
Use CSSor use the textarea's attributes colsand rows?
使用CSS或使用textarea的属性cols和rows?
What are the pros and cons of each method?
每种方法的优缺点是什么？
What are the semantics of using these attributes?
使用这些属性的语义是什么？
How is it usually done?
通常是怎么做的？
采纳答案by kogakure
I recommend to use both. Rows and cols are required and useful if the client does not support CSS. But as a designer I overwrite them to get exactly the size I wish.
我建议同时使用两者。如果客户端不支持 CSS，行和列是必需的并且很有用。但作为一名设计师，我会覆盖它们以获得我想要的尺寸。
The recommended way to do it is via an external stylesheet e.g.
推荐的方法是通过外部样式表，例如
textarea {
width: 300px;
height: 150px;
}<textarea> </textarea>回答by Jan Werkhoven
textarea { height: auto; }<textarea rows="10"></textarea>This will trigger the browser to set the height of the textarea EXACTLY to the amount of rows plus the paddings around it. Setting the CSS height to an exact amount of pixels leaves arbitrary whitespaces.
这将触发浏览器将 textarea 的高度设置为行数加上它周围的填充。将 CSS 高度设置为精确的像素数量会留下任意的空白。
回答by Explosion Pills
According to the w3c, cols and rows are both required attributes for textareas. Rows and Cols are the number of characters that are going to fit in the textarea rather than pixels or some other potentially arbitrary value. Go with the rows/cols.
根据 w3c，cols 和 rows 都是 textareas 的必需属性。Rows 和 Cols 是适合 textarea 的字符数，而不是像素或其他一些可能的任意值。使用行/列。
回答by Stan Rogers
The answer is "yes". That is, you should use both. Without rows and cols (and there are default values even if you don't use them explicitly) the textarea is unusably small if CSS is disabled or overriden by a user stylesheet. Always keep accessibility concerns in mind. That being said, if your stylesheet is allowed to control the appearance of the textarea, you will generally wind up with something that looks a whole lot better, fits into the overall page design well, andthat can resize to keep up with user input (within the limits of good taste, of course).
答案是“是”。也就是说，您应该同时使用两者。如果没有行和列（即使您没有明确使用它们也有默认值），如果 CSS 被用户样式表禁用或覆盖，则 textarea 小得无法使用。始终牢记可访问性问题。话虽如此，如果允许您的样式表控制 textarea 的外观，您通常会得到一些看起来更好的东西，适合整个页面设计，并且可以调整大小以跟上用户输入（当然，在良好品味的范围内）。
回答by Rohit Parte
For text area we can use below css to fix size
对于文本区域，我们可以使用下面的 css 来固定大小
<textarea class="form-control" style=" min-width:500px; max-width:100%;min-height:50px;height:100%;width:100%;" ></textarea>
Tested in angularjs and angular7
在 angularjs 和 angular7 中测试
回答by user470962
<textarea style="width:300px; height:150px;" ></textarea>
回答by AsifQadri
The size of a textarea can be specified by the cols and rows attributes, or even better; through CSS' height and width properties.
The cols attribute is supported in all major browsers.
One main difference is that <TEXTAREA ...>is a container tag: it has a start tag ().
textarea 的大小可以通过 cols 和 rows 属性指定，甚至更好；通过 CSS 的高度和宽度属性。所有主要浏览器都支持 cols 属性。一个主要区别在于它<TEXTAREA ...>是一个容器标签：它有一个开始标签 ()。
回答by KajMagnus
I usually don't specify height, but do specify width: ...and rowsand cols.
我通常不指定height，但指定width: ...和rows和cols。
Usually, in my cases, only widthand rowsare needed, for the textarea to look nice in relation to other elems. (And colsis a fallback if someone doesn't use CSS, as explained in the other answers.)
通常，在我的情况下，仅需要width并且rows需要 textarea 相对于其他元素看起来不错。（cols如果有人不使用 CSS，这是一个后备，如其他答案中所述。）
((Specifying both rowsand heightfeels a little bit like duplicating data I think?))
（（指定两者rows并height感觉有点像我认为的复制数据？））
回答by someone
HTML rows and cols are not responsive!
HTML 行和列没有响应！
So I define the size in CSS. As a tip: if you define a small size for mobiles think about using textarea:focus {};
所以我在 CSS 中定义了大小。提示：如果您为手机定义了小尺寸，请考虑使用textarea:focus {};
Add some extra space here, which will only unfold the moment a user wants to actually write something
在这里添加一些额外的空间，它只会在用户想要真正写东西的那一刻展开
回答by Geoff Kendall
A major feature of textareas is that they are expandable. On a web page this can result in scroll bars appearing on the text area if the text length overfills the space you set (be that using rows, or be that using CSS. That can be a problem when a user decides to print, particularly with 'printing' to PDF - so set a comfortably large min-height for printed textareas with a conditional CSS rule:
textareas 的一个主要特点是它们是可扩展的。在网页上，如果文本长度超过您设置的空间（使用行或使用 CSS），这可能会导致文本区域上出现滚动条。当用户决定打印时，这可能是一个问题，尤其是使用'printing' to PDF - 所以使用条件 CSS 规则为打印的 textareas 设置一个舒适的大最小高度：
@media print {
textarea {
min-height: 900px;
}
}
