rows 属性是控制 默认显示行数的唯一原生 html 方式，不依赖 css 且样式失效时仍生效；它基于字体和行高自动适配设备与缩放，语义清晰、无障碍友好，而固定 height 易失准。
rows 属性是控制 <textarea></textarea> 默认显示行数的唯一原生 HTML 方式，它不依赖 CSS，且在样式失效时仍生效。
为什么 rows 比 CSS height 更可靠
浏览器对 rows 的解释基于当前字体和行高，会自动适配不同设备和缩放设置；而直接写死 height: 100px 容易在字体变大、系统缩放开启时导致内容被截断或留白过多。尤其在移动端或辅助访问场景下，rows 是更健壮的起点。
-
rows="4"表示“大约显示 4 行文本”，不是精确像素值，但语义清晰、可预测 - CSS
height会覆盖rows，但一旦用户缩放页面，固定像素高度就容易失准 - 某些旧版屏幕阅读器只识别
rows来播报“可输入几行”，影响无障碍体验
rows 和 cols 的常见误用
很多人以为 cols 控制宽度、rows 控制高度，就该一起设——其实没必要。现代布局中 cols 几乎无用，因为等宽字符假设（如 Courier）已不成立，中文、emoji、全角/半角混排会让 cols="50" 宽度完全不可控。
- 只设
rows，用 CSS 控制宽度（如width: 100%或max-width: 600px）更合理 -
cols值若设得太小（如cols="10"），可能让 placeholder 文字被截断，且无法通过 CSS 修正 -
rows设为0或负数会被浏览器忽略，设为1会退化成单行外观，但仍是<textarea></textarea>，支持换行
如何让 rows 动态匹配内容高度
纯 HTML 无法自动拉伸 <textarea></textarea> 高度，rows 只是初始值。若需“随内容增长”，必须配合 JavaScript 监听 input 事件并重设 rows 或内联 style.height。
- 简单方案：监听
input后设textarea.rows = 1，再立即设回textarea.rows = textarea.scrollHeight / lineHeight（需先获取行高） - 更稳妥做法：用
textarea.style.height = 'auto'+textarea.style.height = textarea.scrollHeight + 'px'，避免rows计算误差 - 注意：不要在每次
input中反复读写scrollHeight，应加requestAnimationFrame节流
真正难的不是设几行，而是判断“用户到底需要多少行”——rows 是起点，不是终点；它解决的是初始可见性，而不是交互适应性。别指望一个数字搞定所有场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
