CSS 中 textarea 的行和 cols 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2034544/
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
textarea's rows, and cols attribute in CSS
提问by ASD
I'd like to set the textarea's rowsand colsattributes via CSS.
我想通过 CSS设置textarea'srows和cols属性。
How would I do this in CSS?
我将如何在 CSS 中做到这一点？
采纳答案by Sampson
widthand heightare used when going the css route.
width并height在使用 css 路线时使用。
<!DOCTYPE html>
<html>
<head>
<title>Setting Width and Height on Textareas</title>
<style>
.comments { width: 300px; height: 75px }
</style>
</head>
<body>
<textarea class="comments"></textarea>
</body>
</html>
回答by user2928048
回答by Code Monkey
I don't think you can. I always go with height and width.
我不认为你可以。我总是选择高度和宽度。
textarea{
width:400px;
height:100px;
}
the nice thing about doing it the CSS way is that you can completely style it up. Now you can add things like:
用 CSS 方式做这件事的好处是你可以完全设置它的样式。现在您可以添加以下内容：
textarea{
width:400px;
height:100px;
border:1px solid #000000;
background-color:#CCCCCC;
}
回答by Moulde
As far as I know, you can't.
据我所知，你不能。
Besides, that isnt what CSS is for anyway. CSS is for styling and HTML is for markup.
此外，这不是 CSS 的用途。CSS 用于样式，HTML 用于标记。
回答by akinuri
I just wanted to post a demo using calc()for setting rows/height, since no one did.
我只是想发布一个使用calc()设置行/高度的演示，因为没有人这样做。
body {
/* page default */
font-size: 15px;
line-height: 1.5;
}
textarea {
/* demo related */
width: 300px;
margin-bottom: 1em;
display: block;
/* rows related */
font-size: inherit;
line-height: inherit;
padding: 3px;
}
textarea.border-box {
box-sizing: border-box;
}
textarea.rows-5 {
/* height: calc(font-size * line-height * rows); */
height: calc(1em * 1.5 * 5);
}
textarea.border-box.rows-5 {
/* height: calc(font-size * line-height * rows + padding-top + padding-bottom + border-top-width + border-bottom-width); */
height: calc(1em * 1.5 * 5 + 3px + 3px + 1px + 1px);
}<p>height is 2 rows by default</p>
<textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
<p>height is 5 now</p>
<textarea class="rows-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
<p>border-box height is 5 now</p>
<textarea class="border-box rows-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>If you use large values for the paddings (e.g. greater than 0.5em), you'll start to see the text that overflows the content(-box) area, and that might lead you to think that the height is not exactly x rows (that you set), but it is. To understand what's going on, you might want to check out The box modeland box-sizingpages.
如果您使用较大的填充值（例如大于 0.5em），您将开始看到溢出内容（-box）区域的文本，这可能会让您认为高度不完全是 x 行（你设置的），但它是。要了解发生了什么，您可能需要查看盒子模型和盒子尺寸页面。
