rows 和 cols 是近似值，非像素单位，仅影响初始渲染且会被 CSS 覆盖；现代项目中应作为语义 fallback，真实尺寸由 width、min-height、max-height 和 resize 等 CSS 属性控制。
rows 和 cols 是近似值，不是像素单位
设 rows="5 不代表高度是 5×16px，而是浏览器按当前字体、行高估算出“约 5 行高”的初始尺寸；cols="40 也不等于 40ch 宽度，它依赖默认字体（通常是等宽字体）下每个字符的平均宽度，换用 font-family: "Segoe UI" 后，实际显示可能只剩 32 个汉字左右。
常见错误现象：
— 中文输入时 cols 明显“不够用”，一行只塞下 20 多字
— 改了 font-size: 18px 后 rows="4" 变得只够显示 2 行
— 在移动端或缩放页面时，cols/rows 渲染完全失准
-
rows和cols仅影响初始渲染，不约束用户拉伸或内容溢出 - 它们会被 CSS 的
width、height、min-height直接覆盖——写了style="height: 100px"，rows就失效 - 若必须保留语义（如辅助技术读取），可设合理 fallback 值：例如
rows="4"+cols="30"，再用 CSS 主控尺寸
用 CSS 替代 rows/cols 控制真实尺寸
现代项目里，rows 和 cols 应当退居为语义 fallback，真正尺寸靠 CSS 实现。固定 height 容易截断内容，推荐组合：
-
width: 100%—— 拉满父容器宽度 -
min-height: 80px—— 保证至少显示 3–4 行，且允许撑开 -
max-height: 200px—— 防止无限拉高，超出后出现滚动条 -
resize: vertical—— 明确允许用户手动调整高度（禁用则写resize: none） - 避免
overflow: hidden，否则内容被裁剪不可见
示例：<textarea style="width: 100%; min-height: 80px; max-height: 200px; resize: vertical;"></textarea>
立即学习“前端免费学习笔记（深入）”；
兼容旧浏览器（如 IE11）时怎么设 rows/cols 才不翻车
IE11 不支持 min-height 在 <textarea> 上可靠生效，resize 也无效，此时 rows/cols 成为唯一可控变量，但不能乱填。
- 别设
cols="1000"或rows="100"，IE 下会触发异常换行或滚动条错位 - 经验数值（需实测）：
cols="50"≈ 视觉宽度 350px 左右，rows="4"≈ 初始高度 75px（含 padding 和 line-height） - 若用了自定义字体，必须同步重置
font-size和line-height，否则rows计算彻底失准 - 搭配
style="overflow: auto"能缓解 IE 下内容溢出不可见的问题
动态修改 rows 值的副作用
JS 直接改 textarea.rows 会触发重排（reflow），频繁操作影响性能。更关键的是隐性行为：
-
document.getElementById("t").rows = 8不仅改高度，还会重算整个尺寸逻辑，可能让宽度突变（尤其没配cols时） - 在表单验证中“错误时 expand rows”，记得同步更新
cols，否则宽高比例失调 - 服务端控件（如 ASP.NET 的
HtmlTextArea.Rows）赋值后，若前端有!importantCSS 规则，可能覆盖失效 -
rows无法响应式适配屏幕宽度——它不会随@media查询变化，移动端请用媒体查询 +min-height
真正难的不是设几行，而是让高度既符合初始预期，又不卡住用户输入。多数场景下，rows 只该用作语义标记或降级保底，真实尺寸控制交给 CSS 或 JS 更稳妥。
