CSS中textarea的行和cols属性

154

我想通过CSS 设置textarea的rows和cols属性。

如何在CSS中执行此操作？

css styling

— 自卫队
source

A，此时要使用的问题：stackoverflow.com/questions/3896537/...

— 西罗桑蒂利郝海东冠状病六四事件法轮功

107

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>

— 桑普森
source

12

根据下面的user2928048的回答，如果您使用“ em”而不是“ px”，则可以像使用“ rows”和“ cols”属性那样，以字符为单位指定宽度和高度。我相信甚至可以与IE6一起使用。

— Swanny 2014年

虽然我同意em用于指定高度，但我怀疑它是否可以用于指定宽度。它可以与等宽字体一起使用（找出字符的宽高比并相应地修改宽度值之后），就是这样。除等宽外，字符宽度不是固定的，因此我认为em或cols属性在指定宽度时不会有所帮助。

— akinuri '19

我可能错了，但是px对我不起作用；他们做到了。

— Jesse Steele

309

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

它等效于：

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

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

— 用户名
source

39

更确切地说，您需要考虑padding并line-height考虑到。假设您在顶部和底部分别填充了半个em，并且行高为1.2em，那么4行的高度将为1 + 4 * 1.2 = 5.8em。

— 2014年

2

@nalply您的解决方案是正确的。问题是4em = 4 x字体大小，它既不影响填充也不影响行高

— Nicholas

3

如果您具有属性box-sizing：content-box; 您不必担心填充，因此您只需要保持行高即可。

— mikewasmike 2015年

2

尼斯@nalply，感谢您的方法。在您的答案中添加一些内容，calc（）CSS3函数可以简化宽度/高度计算：假设我有一个padding-top和padding-bottom底部为4px的textarea，我希望它的高度为3行，高度为height: calc(3em + 8px);。

— GBU

虽然rows属性是（某种程度上）可靠的，但是cols除非我在textarea上使用等宽字体，否则我不会依赖属性。参见@AlexanderScholz的最新小提琴。

— akinuri

16

我认为你不能。我总是走高和宽。

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

CSS方式的好处是，您可以完全对其进行样式设置。现在，您可以添加以下内容：

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

— 猴子代码
source

4

据我所知，你做不到。

另外，那不是CSS的意义所在。CSS用于样式，HTML用于标记。

— 莫尔德
source

1

CSS用于样式化元素的视觉表示。这包括文本区域的宽度和高度。

— 桑普森2010年

它们是不一样的，浏览器考虑到文字的高度上的每个行包括line-height，padding在容器（未计算基于一个高度上box-sizing），即使考虑到用于确保文本框显示集数目的字体的纵横比不同的使用css height无法实现的文本行数。

— 威廉·伊斯特

0

我只想发布一个使用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），则会开始看到溢出content（-box）区域的文本，这可能会导致您认为高度不完全是x行（您设置的），但确实如此。要了解发生了什么，您可能需要查看Box模型和Box大小页面。

— 秋千
source