Question

我正在尝试通过css设置textarea的行和列属性。我将如何在CSS中执行此操作？

Answer 1

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

相当于：

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

其中1em等效于当前字体大小，因此文本区域为50个字符宽。 see here

Answer 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>

Answer 3

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

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

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

textarea{
width:400px;
height:100px;
border:1px solid #000000;
background-color:#CCCCCC;
}

Answer 4

据我所知，你不能。

此外，这不是css的用途。用于标记的样式和用于标记的HTML。

编辑：很酷，我站得更正了。

Answer 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页面。

textarea的行和css中的cols属性

5 个答案: