我应该使用CSS宽度/高度或HTML cols/rows属性来设置textarea的大小吗?

Raú*_*ràs 286 html css textarea

每当我开发一个包含a的新表单textarea时,我需要指定其维度时遇到以下困境:

使用CSS或使用textarea的属性colsrows

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

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

通常怎么做?

kog*_*ure 250

我建议同时使用两者.如果客户端不支持CSS,则行和列是必需且有用的.但作为设计师,我会覆盖它们以获得我想要的尺寸.

建议的方法是通过外部样式表,例如

textarea {
  width: 300px;
  height: 150px;
}
Run Code Online (Sandbox Code Playgroud)
<textarea> </textarea>
Run Code Online (Sandbox Code Playgroud)

  • 您可以使用"em"作为度量,而不是像素.1em是任何字体和大小的"M"的宽度.但cols仅在与等宽字体一起使用时才有意义,大多数设计并非如此.为了获得完美的高度拟合,请使用"line-height"的倍数作为textarea的高度. (18认同)
  • @LeoGalleguillos"必需且有用_如果客户端不支持CSS_".没人说有关验证的事情. (5认同)
  • 这没关系,但你必须意识到,无论你设置大小的任何空间都会浪费,而且只是为了表演. (3认同)
  • @tandu:你的意思是"浪费,真的只是为了表演"? (3认同)
  • rows/cols基于用户的字符大小.因此,如果你有一个css定义的宽度/高度不能被textarea中的一个字符的像素分割,那么就会有很多whitepsace在垂直和水平上留下.可能没有人会注意到,但只是说. (2认同)

Jan*_*ven 87

在HTML集中

<textarea rows="10"></textarea>
Run Code Online (Sandbox Code Playgroud)

在CSS集中

textarea { height: auto; }
Run Code Online (Sandbox Code Playgroud)

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

  • 不幸的是,"textarea的高度与Firefox中的行不匹配" - 它是"行+ 1"http://stackoverflow.com/q/7695945/1266880 (4认同)
  • 不知道自13年以来情况是否有所改变,或者不确定我的特殊情况是否太过明显,但是在CSS中设置`height:auto;`似乎丝毫不会影响我的文本区域。 (2认同)

Exp*_*lls 9

根据w3c,cols和rows都是textareas的必需属性.行和列是要适应textarea而不是像素或其他可能任意值的字符数.去行/列.

  • @MichaelStramel我的答案是四岁:) - 顺便说一句,它不是*w3c学校.他们没有隶属关系.我不确定HTML5是否具有*required*属性的概念,但我可能错了.我仍然不明白为什么设置宽度/高度会比行/列更好 (15认同)
  • w3c学校声明你可以通过rows和cols属性设置它,但设置高度和宽度更好.在w3c.org上没有提到行和列是textarea的必需属性.http://www.w3schools.com/tags/tag_textarea.asp http://www.w3.org/wiki/HTML/Elements/textarea (8认同)
  • 我意识到,在我评论之后,但仍然认为这对阅读这篇文章的任何人都有用.此外,对于响应式设计,行和列可能会导致问题,除非它们是通过JavaScript设置的.IMO通过CSS设置它是一种更好的方式. (3认同)

Roh*_*rte 8

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

    <textarea  class="form-control" style=" min-width:500px; max-width:100%;min-height:50px;height:100%;width:100%;" ></textarea>
Run Code Online (Sandbox Code Playgroud)

在 angularjs 和 angular7 中测试

  • 这和角有什么关系?与 2010 年/的现有答案相比,这有何增加 (6认同)

小智 6

 <textarea style="width:300px; height:150px;" ></textarea>
Run Code Online (Sandbox Code Playgroud)

  • @user470962 广告。如果您将语法错误更正为 '&lt;textarea style="width: 300px; height: 150px;"&gt;' 那么代码就可以了。没有必要侮辱别人。如您所见,最受欢迎的答案与他的不同。+1 (19认同)
  • @TAAPSogeking 公平地说,这是同样的答案,4 年后。-1 (2认同)

Sta*_*ers 5

答案是肯定的.也就是说,你应该同时使用两者.没有行和列(即使您没有显式使用它们也有默认值)如果CSS被禁用或被用户样式表覆盖,则textarea会非常小.始终牢记可访问性问题.话虽如此,如果你的样式表被允许控制textarea的外观,你通常会得到一些看起来更好的东西,适合整个页面设计,并且可以调整大小以跟上用户输入(当然,在良好的品味范围内).


小智 5

HTML 行和列没有响应!

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

在这里添加一些额外的空间,只有当用户想要实际写东西的时候才会展开