168

我想通过 CSS 设置textarea'srows和cols属性。

我将如何在 CSS 中做到这一点？

4

5 回答 5

346 
<textarea rows="4" cols="50"></textarea>

它相当于：

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

其中 1em 相当于当前字体大小，因此使文本区域宽 50 个字符。 看这里。

于 2014-01-22T10:57:47.457 回答
113

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>
于 2010-01-09T19:04:39.393 回答
16

我不认为你可以。我总是选择高度和宽度。

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

用 CSS 方式做的好处是你可以完全设置它的样式。现在您可以添加以下内容：

textarea{
width:400px;
height:100px;
border:1px solid #000000;
background-color:#CCCCCC;
}
于 2010-01-09T19:07:33.787 回答
3

据我所知，你不能。

此外，无论如何，这不是 CSS 的用途。CSS 用于样式，HTML 用于标记。

于 2010-01-09T19:05:53.290 回答
1

我只是想发布一个使用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 行（你设置的），但它是。要了解发生了什么，您可能需要查看盒子模型和盒子尺寸页面。

于 2019-12-06T13:18:40.017 回答