rows属性仅控制textarea初始可见行数，非像素高度或最大输入行数；需配合cols使用，易受css干扰，推荐与min-height结合实现语义化与自适应。
rows 属性就是干这事的：直接写在 <textarea></textarea> 标签里，值是数字，表示“刚打开页面时，用户能看到几行”。不是像素高度，也不是最大能输几行，就单纯控制初始可见行数。
怎么写才生效
必须写成属性形式，不能靠 CSS 或 JS 模拟：
<textarea name="desc" rows="4"></textarea>
常见错误包括：
- 漏掉
rows，浏览器按默认值rows="2"渲染，看起来太矮 - 只写
rows="6"但没配cols，某些 WebView（比如旧版 iOS Safari）会把宽度压到极窄，导致“高但看不见字” - 写了
style="height: 60px;"，它会直接覆盖rows的计算逻辑，rows彻底失效
为什么设了 rows="5" 却看起来只有 3 行高
根本原因不是 rows 失效，而是它不控制像素，只参与估算。实际高度由这些因素共同决定：
- 当前字体的
font-size和line-height（比如line-height: 1.2下，rows="4"可能只撑出 76px） - 元素自身的
padding、border（rows不包含它们） - CSS 中设置了
height、max-height或box-sizing: border-box等规则 - 父容器用了
flex或grid，且没设align-items: start，导致垂直居中后“视觉上被截断”
rows 和 CSS height 能不能混用
能，但得明确谁主谁次：
- 只用
rows：语义清晰，但高度浮动大，适合对尺寸要求宽松的表单字段 - 只用
style="height: 100px;"：完全接管高度，rows变成摆设；此时务必加style="resize: vertical;"，否则用户无法手动拉伸 - 推荐组合：
rows="4" style="min-height: 80px; height: auto;"—— 既保留初始行数语义，又允许内容撑开（需 JS 监听input并设style.height = textarea.scrollHeight + 'px'才真自适应）
JS 动态改 rows 值要注意什么
用 textarea.rows = 6 是合法且即时的，但有隐性成本：
- 触发浏览器重排（reflow），频繁调用（比如每输入一个字都改）会卡顿
- 修改后不会自动同步
cols，宽高比例可能突变，显得 UI 跳动 - 服务端控件（如 ASP.NET 的
HtmlTextArea.Rows）赋值后，若前端有!important的 CSS 高度规则，仍会被覆盖
真正难的不是设几行，而是让高度既符合初始预期，又不卡住用户输入。多数项目里，rows 只该用作 fallback 或语义标记，实际高度控制交给 CSS 或 JS 更稳妥。
