使用 CSS 与使用 cols 和 rows 调整 textarea 的大小

Posted 2023-05-07

【中文标题】使用 CSS 与使用 cols 和 rows 调整 textarea 的大小

【英文标题】：sizing a textarea with CSS vs with cols and rows

【发布时间】：2013-05-12 20:27:33

【问题描述】：

用 cols 和 rows 调整 textarea 的大小与用 height 和 width 调整 textarea 有什么区别？

<textarea id="TextArea1" cols="73" rows="12">with cols rows</textarea>
<textarea id="TextArea2" style="height:200px; width:600px";>with CSS</textarea>

jsFiddle

【问题讨论】：

Is it better to size a textarea with CSS width / height or html cols / rows attributes?的可能重复

【参考方案1】：

cols 和 rows 是相对于字体大小的。 height 和 width 不是。

http://jsfiddle.net/rVUEE/1/

编辑：说它们是相对于“字体大小”来说有点过于简单化了。如果明确设置，它们也会考虑 line-height 和 letter-spacing 等内容。

【讨论】：

cols 与字体大小无关，rows 也不是，真的（rows 与行高有关）。

@JukkaK.Korpela cols 相对于那时是什么？我猜这真的是font-size 和letter-spacing 的组合？

【参考方案2】：

cols 和 rows 属性是 HTML 规范所必需的。 W3C HTML5（2014 年批准）将它们设为可选，但使用了不切实际的默认值（20 和 2）。 即使禁用 CSS，属性也会生效。 另一方面，如果尺寸也在 CSS 中指定，则属性“丢失”。 rows 属性以行为单位指定高度（实际上，以行高为隐含单位），cols 属性以“平均”字符宽度指定宽度，一个非常模糊的概念，浏览器的解释非常不同。在 CSS 中，可以使用任何 CSS 单位，并且必须明确指定。

【讨论】：

cols 和 rows 在 html5 规范中不再需要。

-1 rows 和 cols 属性不是 textarea 元素通过 HTML5 验证所必需的，也不是 W3C 要求的。

【参考方案3】：

CSS 并没有那么不同。结果将（几乎）相同。

我大部分时间都在使用最大宽度、最小宽度和相同的高度。在 Chrome 等新浏览器中，您可以调整文本区域的大小。

【讨论】：

文本区域大小调整可以在 CSS 和 HTML 中禁用。