CSS 中 textarea 的 rows 和 cols 属性
Posted
技术标签:
【中文标题】CSS 中 textarea 的 rows 和 cols 属性【英文标题】：textarea's rows, and cols attribute in CSS 【发布时间】：2011-01-03 07:43:02 【问题描述】：我想通过 CSS 设置 textarea 的 rows 和 cols 属性。
如何在 CSS 中做到这一点？
【问题讨论】：
何时使用哪个问题：***.com/questions/3896537/… 【参考方案1】：<textarea rows="4" cols="50"></textarea>
相当于：
textarea
height: 4em;
width: 50em;
其中 1em 相当于当前字体大小，因此使文本区域宽 50 个字符。 see here.
【讨论】：
更准确地说，你需要考虑padding和line-height。假设您在顶部和底部有半个 em 的填充和 1.2em 的行高，那么 4 行的高度将是 1 + 4 * 1.2 = 5.8em。
@nalply 您的解决方案是正确的。问题是 4em = 4 x font-size 既不考虑填充也不考虑行高
如果你有属性 box-sizing:content-box;你不必担心填充，所以你只保留行高。
很好@nalply，感谢您的方法。在您的答案中添加一点，calc() CSS3 函数可以简化宽度/高度计算：假设我有一个带有 padding-top 和 padding-bottom 4px 的 textarea，我希望它是 3 行高，高度是height: calc(3em + 8px);.
虽然rows 属性（有些）可靠，但我不会依赖cols 属性，除非我在textarea 上使用等宽字体。请参阅@AlexanderScholz 的updated fiddle。【参考方案2】：
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>
【讨论】：
根据 user2928048 下面的回答，如果您使用“em”而不是“px”，那么您可以像使用“rows”和“cols”属性一样指定字符的宽度和高度。我相信甚至可以使用 IE6。 虽然我同意使用em 指定高度，但我怀疑它是否可以用于指定宽度。它可能适用于等宽字体（在计算出字符的宽高比并相应地修改宽度值之后），就是这样。除了等宽，字符宽度不固定，所以我认为em 或cols 属性在指定宽度时没有帮助。
我可能错了，但 px 对我不起作用；他们做到了。【参考方案3】：
我不认为你可以。我总是选择高度和宽度。
textarea
width:400px;
height:100px;
以 CSS 方式来做这件事的好处是您可以完全设置它的样式。现在您可以添加如下内容：
textarea
width:400px;
height:100px;
border:1px solid #000000;
background-color:#CCCCCC;
【讨论】：
【参考方案4】：据我所知，你不能。
此外，这不是 CSS 的用途。 CSS 用于样式，HTML 用于标记。
【讨论】：
CSS 用于样式化元素的视觉表示。这包括文本区域的宽度和高度。 它们不一样，浏览器会考虑容器上每一行文字的高度包括line-height、padding（不是根据box-sizing计算高度），甚至考虑到字体的不同纵横比，以确保文本框显示设置的文本行数，这是使用 CSS 高度无法实现的。【参考方案5】：
我只是想发布一个使用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>如果您对填充使用较大的值（例如大于 0.5em），您将开始看到溢出内容（-box）区域的文本，这可能会导致您认为高度不准确x 行（您设置的），但确实如此。要了解发生了什么，您可能需要查看 The box model 和 box-sizing 页面。
【讨论】：
以上是关于CSS 中 textarea 的 rows 和 cols 属性的主要内容，如果未能解决你的问题，请参考以下文章
使用 cols/rows 或 style-width/height 来指定 textarea 的尺寸？ [复制]
HTMLHTML 表单 ④ ( textarea 文本域控件 | select 下拉列表控件 )