logo标签列表

CSS中textarea的rows和cols属性

cssstyling
180
我想通过CSS设置
一个关于何时使用哪个问题的指南：https://dev59.com/f2865IYBdhLWcg3wR8eh - Ciro Santilli OurBigBook.com
另请参阅：textarea: 使用CSS进行样式设置，网页表单样式设置，以及textarea规范。 - djvg
我想重要的是要认识到 textarea 被视为一个替换元素，具有内在尺寸（类似于 img），如此处所述：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#styling_with_css。 - djvg
5个回答
364
<textarea rows="4" cols="50"></textarea>

它的含义等同于：

textarea {
    height: 4em;
    width: 50em;
}

其中1em等同于当前字体大小，因此将文本区域设置为50个字符宽。 点击这里查看。

48
更准确地说，您需要考虑padding(填充)和line-height(行高)。比如说，如果在顶部和底部设置了0.5em的填充(padding)，并且行高(line-height)为1.2em，则4行的高度将为1 + 4 * 1.2 = 5.8em。 - nalply
5
@nalply的解决方案是正确的。问题在于4em = 4 x 字体大小，这既没有考虑填充（padding）也没有考虑行高（line-height）。 - Nicholas
4
如果你的属性是box-sizing:content-box;，那么你就不必担心填充(padding)，只需关注行高(line height)。 - mikewasmike
3
不错的@nalply，感谢你的方法。补充一下你的答案，calc() CSS3函数可以简化宽度/高度计算：比如我有一个带有padding-top和padding-bottom 4px的文本区域，并且我想让它高度为3行，那么高度就应该是height: calc(3em + 8px);。 - GBU
1
虽然 rows 属性有一定的可靠性，但我不会依赖 cols 属性，除非我在文本区域中使用等宽字体。请参见 @AlexanderScholz 的 更新版 fiddle。 - akinuri
显示剩余2条评论
115

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>
15
根据下面用户2928048的回答，如果您使用“em”而不是“px”，则可以像使用“rows”和“cols”属性一样指定字符宽度和高度。我相信这甚至适用于IE6。 - Swanny
2
虽然我同意使用 em 来指定高度，但我怀疑它能否用于指定宽度。它可能适用于等宽字体（在确定字符的宽高比并相应修改宽度值后），但除此之外，字符宽度并不固定，因此我认为 em 或 cols 属性在指定宽度时无法帮助。 - akinuri
1
我可能错了，但是px对我来说不起作用；em可以。 - Jesse
16

我认为你不能这样做。我总是使用高度和宽度。

textarea{
width:400px;
height:100px;
}

使用 CSS 的方式的好处在于您可以完全样式化它。现在，您可以添加类似以下内容的东西：

textarea{
width:400px;
height:100px;
border:1px solid #000000;
background-color:#CCCCCC;
}
3
据我所知，你不能这样做。另外，CSS也不是用来实现这个的。CSS是用来设置样式的，HTML是用来标记的。
2
CSS用于样式化元素的视觉呈现，包括文本区域的宽度和高度。 - Sampson
它们并不相同，浏览器会考虑每一行文本的高度，包括 line-height、容器上的 padding（不基于 box-sizing 计算高度），甚至考虑使用不同字体纵横比以确保文本框显示设置的行数，这是通过使用 CSS 高度无法实现的。 - William Isted
2

我只是想发布一个演示，使用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），则会开始看到溢出内容（框）区域的文本，这可能会让您认为高度不是您设置的x行，但实际上是。要了解发生了什么，您可能需要查看盒模型和box-sizing页面。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接