textarea 的 rows 和 cols 属性常因 css 的 height、min-height 等覆盖而失效，rows 仅作初始换行提示；应避免硬设 height，改用 min-height + resize: vertical，或通过 js 监听 input 动态调整高度，并注意移动端行高渲染差异。
textarea 的 rows 和 cols 属性为什么经常失效
直接写 rows="5" 和 cols="40" 看似简单，但实际中常被 CSS 的 width、height 或 min-height 覆盖，导致行数不生效。浏览器会优先按 CSS 尺寸渲染，rows 只作为初始换行提示，不是强制约束。
真正控制“多行可见高度”的关键，是让 textarea 尊重 rows，同时避免 CSS 干预其行高计算：
- 去掉所有影响高度的 CSS（如
height、max-height） - 用
line-height+padding配合rows算出准确高度：例如line-height: 1.5、上下padding: 6px，则每行实际占高 ≈ 1.5 × 字号 + 12px - 若必须用 CSS 控制尺寸，改用
min-height和resize: vertical更稳妥
CSS 中用 height 控制 textarea 高度的风险
硬设 height: 120px 会让 rows 彻底失效，且不同字号、行高、padding 下，实际显示行数不可控。更麻烦的是：用户粘贴大段文本后，滚动条出现位置突兀，视觉割裂。
推荐替代方案：
- 用
min-height替代height，例如min-height: 100px - 配合
resize: vertical允许用户手动拉伸，保留rows语义 - 如果需固定行数（如严格限制 6 行），用 JS 监听
input事件 +scrollHeight动态调整高度，比纯 CSS 更可靠
用 JavaScript 动态适配内容高度（自适应 textarea）
当希望输入框随文字自动撑开（类似微信聊天框），不能只靠 rows，得监听内容变化并重设 height：
const ta = document.querySelector('textarea');
ta.addEventListener('input', () => {
ta.style.height = 'auto';
ta.style.height = ta.scrollHeight + 'px';
});
注意点：
- 必须先设
height: auto再读scrollHeight，否则值不准 - 要加
overflow: hidden防止双滚动条 - 移动端 iOS Safari 对
scrollHeight计算有延迟，可加requestAnimationFrame容错
移动端 textarea 行高错位的常见原因
在 iPhone 上，textarea 常出现文字贴顶、行距压缩、光标偏移——这通常不是 rows 问题，而是字体渲染差异触发的行高重算失败。
解决方法很具体：
- 显式设置
font-size和line-height（不要用normal） - 加
box-sizing: border-box统一盒模型 - 避免用
rem或em设置line-height，改用无单位数值（如line-height: 1.4） - 某些安卓 WebView 对
padding解析异常，建议用padding-block替代padding-top/padding-bottom
多行输入框的“大小”本质是行为与视觉的协同，rows 是起点，不是终点；CSS 控制要留余量，JS 适配要防抖动，移动端还得单独验真机。别信“设了 rows 就完事”的直觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
