CSS 中 textarea 的行和屁股属性

小开

最佳答案

走 css 路线时使用 width和 height。

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

小开

据我所知，你不能。

另外，CSS 不是用来做样式的，而 HTML 是用来做标记的。

小开

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

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

使用 CSS 的好处是，你可以完全地将它设计成样式。现在你可以添加这样的内容:

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

小开

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

它相当于:

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

其中1em 等效于当前的字体大小，因此使文本区域宽度为50个字符。请看这里。

小开

我只是想发布一个使用 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.5 em) ，您将开始看到溢出内容(- box)区域的文本，这可能会让您认为高度并不完全是 x 行(您设置的) ，但它是。要了解发生了什么，您可能需要查看盒子模型和盒子大小页面。