rows和cols仅是初始渲染的字符数估算值，非像素单位，实际尺寸受字体、css等影响；现代项目应以css（如min-height、width、resize）为主控，rows/cols仅作语义fallback。
rows 和 cols 不是尺寸限制，只是初始渲染建议值
它们不能限制文本域大小，只告诉浏览器“按默认等宽字体估算出约几行高、几字符宽”，实际像素尺寸由字体、字号、行高、padding 共同决定。设 rows="5 后用户仍可拖拽拉高，内容超长也会自动出现滚动条——它既不限制输入长度，也不约束最终显示范围。
为什么写了 rows="4" 却只看到 2 行？
常见原因不是属性写错，而是 CSS 覆盖或字体变化导致估算失效：
-
font-size从 14px 改成 18px 后，同一rows="4"对应的像素高度翻倍，但容器没同步撑开，视觉上就“只剩 2 行” - 用了
font-family: "Microsoft YaHei"这类非等宽字体，cols="50"的宽度参考完全失准，中文一行可能只塞下 25 个字 - 放在
display: flex容器里，cols被 flex 主轴收缩逻辑忽略，textarea被压成一条细线 - 写了
style="height: 100px"，rows就彻底失效——CSS 的height会覆盖 HTML 属性的初始尺寸计算
真正能限制大小的组合：CSS + resize + overflow
要禁用拖拽、控制可拉伸范围、防止溢出，必须靠 CSS 配合规范写法：
-
resize: none必须搭配overflow: auto（或hidden/scroll），否则浏览器直接忽略——因为 CSS 规范要求resize只在overflow不为visible时生效 - 想允许垂直拉伸但不许水平拉：用
resize: vertical，同时加min-height: 6em和max-height: 12em，避免无限撑高 - 固定宽度场景下，
width: 100%比cols可靠；高度必须用min-height+max-height，别用height - 务必加
box-sizing: border-box，否则padding和border会让内容区变窄，视觉宽度和预期不符
兼容旧浏览器时 rows/cols 怎么设才不太翻车
IE11 及更早版本不支持 min-height 在 textarea 上生效，resize 也无效，这时 rows/cols 是唯一可控锚点，但需谨慎：
- 避免极端值：
cols="1000"在 IE 下可能触发异常换行或滚动条错位 - 经验参考值（需实测）：
rows="3"≈ 初始高度 60–75px（含默认 padding 和 line-height），cols="50"≈ 视觉宽度 300–400px - 若用了自定义字体，必须同步重置
line-height，否则rows渲染高度偏差极大 - 搭配
overflow: auto，防止内容溢出不可见——这是 IE 下最实用的兜底手段
真正需要限制尺寸时，别指望 rows 和 cols 承担布局责任。它们现在唯一的合理用途，是给屏幕阅读器提供语义 fallback，或者作为老旧环境下的降级保底。所有精确控制都得落在 CSS 上，而且必须验证 overflow 是否生效、resize 是否被更高优先级规则覆盖——这两点最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
