307

每次我开发包含的新表格时，textarea当我需要指定尺寸时都会遇到以下难题：

使用CSS或使用textarea的属性cols以及rows？

每种方法的优缺点是什么？

使用这些属性的语义是什么？

通常如何做？

html css textarea

— Pherrymason
source

268

我建议同时使用。如果客户端不支持CSS，则必须使用行和列。但是作为一名设计师，我将它们覆盖以得到我想要的尺寸。

推荐的方法是通过外部样式表，例如

textarea {
  width: 300px;
  height: 150px;
}

<textarea> </textarea>

展开摘要

— 科加库雷
source

4

没关系，但是您必须意识到，设置大小的任意空间都会浪费掉，而且实际上只是为了展示。

— 爆炸药

4

@tandu：“浪费，实际上只是为了展示”是什么意思？

— BoltClock

2

行/列基于用户的字符大小。因此，如果您有一个css定义的宽度/高度，不能用textarea中字符的像素数来划分，那么在垂直和水平方向上将剩下那么多白点。也许没有人会注意到，只是说出来。

— 爆炸药

21

您可以使用“ em”代替像素来度量。1em是任何字体和大小的“ M”的宽度。但是cols仅与等宽字体一起使用才有意义，而在大多数设计中情况并非如此。要获得完美line-height的高度，请使用textarea高度的倍数。

— kogakure 2010年

5

@LeoGalleguillos“ 如果客户端不支持CSS，则是必需和有用的 ”。没有人对验证发表任何评论。

— Janus Bahs Jacquet

96

textarea { height: auto; }

<textarea rows="10"></textarea>

展开摘要

这将触发浏览器将textarea的高度精确设置为行数加上其周围的填充。将CSS高度设置为确切数量的像素会留下任意空格。

— 扬·韦尔科文（Jan Werkhoven）
source

4

不幸的是，“ textarea的高度与Firefox中的行不匹配”-它是“ rows + 1” stackoverflow.com/q/7695945/1266880

— apurkrt

2

不知道自13年以来情况是否发生了变化，或者不确定我的特殊情况是否非常明显，但是height: auto;在CSS中进行设置似乎根本不会影响我的文本区域。

— clozach'4

10

根据w3c，cols和row都是textareas必需的属性。行和列是要适合文本区域的字符数，而不是像素或其他可能的任意值。与行/列。

— 爆炸药
source

8

w3c学校声明您可以通过rows和cols属性进行设置，但是设置高度和宽度更好。在w3c.org上没有提到行和列是textarea的必需属性。w3schools.com/tags/tag_textarea.asp w3.org/wiki/HTML/Elements/textarea

— Michael Stramel 2014年

17

@MichaelStramel我的回答是四岁:)-顺便说一下，它不是 w3c学校。他们不隶属。我不确定HTML5是否已具有必填属性的概念，但我对此可能是错误的。我仍然看不到为什么设置宽度/高度会比行/列更好的做法

— Explosion Pill 2014年

3

我意识到在发表评论后，仍然觉得与阅读这篇文章的任何人有关。同样，对于响应式设计，除非通过JavaScript进行设置，否则行和列可能会引起问题。IMO使通过CSS进行设置的方法更好。

— Michael Stramel 2014年

6

答案是“是”。也就是说，您应该同时使用两者。没有行和列（即使没有显式使用它们也有默认值），如果CSS被用户样式表禁用或覆盖，则文本区域将变得很小。始终牢记可访问性问题。就是说，如果允许样式表控制文本区域的外观，通常会得到看起来更好的东西，可以很好地适合整个页面设计，并且可以调整大小以跟上用户输入（当然，在好味道的范围内）。

— 斯坦·罗杰斯
source

6

对于文本区域，我们可以使用下面的CSS来固定大小

    <textarea  class="form-control" style=" min-width:500px; max-width:100%;min-height:50px;height:100%;width:100%;" ></textarea>

在angularjs和angular7中测试

— 罗希·帕特
source

1

这与Angular有什么关系？与2010年的现有答案相比，这又如何添加？

— LazarLjubenović

5

 <textarea style="width:300px; height:150px;" ></textarea>

— 用户名
source

19

@ user470962 Ad hominem。如果将语法错误更正为'<textarea style =“ width：300px; height：150px;”>，那么代码就可以了。不需要侮辱某人。如您所见，最受欢迎的答案与他的不同。+1

— TAAPSogeking

1

公平地说，@ TAAPSogeking，4年后，答案是相同的。-1

— Rambatino '16

4

文本区域的大小可以由cols和rows属性指定，甚至更好；通过CSS的height和width属性。所有主要浏览器均支持cols属性。一个主要区别是<TEXTAREA ...>容器标记：它具有开始标记（）。

— 阿西夫·卡德里（AsifQadri）
source

2

我通常不指定height，但指定width: ...and rows和cols。

通常，在我的情况下，仅width和rows需要，文本区域相对于其他元素看起来不错。（和cols如果其他人不使用CSS，则是一个备用方法，如其他答案所述。）

（（同时指定两者rows，height感觉有点像我想复制数据吗？）

— 凯吉·马格努斯（KajMagnus）
source

2

文本区域的主要特征是它们是可扩展的。在网页上，如果文本长度超出了您设置的空间（使用行或使用CSS的空间），这可能会导致滚动条出现在文本区域上。当用户决定打印时，尤其是使用“打印”为PDF-因此，请使用条件CSS规则为打印的文本区域设置一个舒适的最小高度：

@media print { 
textarea {
min-height: 900px;  
}
}

— 杰夫·肯德尔
source

2

如果您不每次都使用，请使用line-height：'..'; 属性，它控制textarea的高度，而width属性则用于textarea的宽度。

或者您可以通过以下CSS使用font-size：

#sbr {
  font-size: 16px;
  line-height:1.4;
  width:100%;
}

— Nurealam Sabbir
source

2

HTML行和列不响应！

因此，我在CSS中定义了尺寸。提示：如果您为手机定义了小尺寸，请考虑使用textarea:focus {};

在此处添加一些额外的空间，这只会在用户想要实际写东西的时候展开

— 某人
source

-11

的CSS

input
{
    width: 300px;
    height: 40px;
}

的HTML

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

— 阿舒
source

您可以非常轻松地使用css

— ASHU 2014年

您可以通过CSS两种方式进行操作，也可以像这样<textarea rows =“ 4” cols =“ 50”> HELLO </ textarea>

— ASHU 2014年

为什么将这些属性应用于所有元素？

— blackmambo

我是否应该使用CSS width / height或HTML cols / rows属性设置文本区域的大小？

的CSS

的HTML