rows属性仅控制textarea默认显示行数，不影响输入长度和最终高度，CSS height等会覆盖其效果；限制显示行数用line-clamp（对div有效），限制输入行数需JS监听input事件截断换行符。
HTML textarea 的 rows 属性到底管不管用？
rows 只控制“默认显示行数”，不是最终高度限制，也不影响用户输入长度。它只是告诉浏览器：这个 textarea 初始渲染时大概占几行（基于字体大小和行高估算），实际高度可能被 CSS 的 height、min-height 或用户拖拽覆盖。
常见错误现象：rows="3" 写了，但文本拉到 10 行也不换行、不截断；或者加了 resize: none 后，rows 看似生效，但换行逻辑混乱。
-
rows值是纯数字，无单位，例如rows="4" - 它只对
textarea有效，input[type="text"]不支持 - 如果同时设了
style="height: 100px"，rows就基本失效——浏览器优先按 CSS 计算高度
真要限制「最多显示 N 行」，得靠 CSS + line-clamp
line-clamp 是目前最直接的“视觉上截断多行文本”方案，但它只对块级元素（如 div）有效，不能直接用于 textarea ——因为 textarea 是表单控件，内容可编辑且自带滚动，line-clamp 对它无效。
使用场景：你真正想限制的是「展示结果」（比如评论预览、摘要），而不是让用户在 textarea 里打字时被卡住。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 对
div类文本容器用：display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; - 注意：必须配合
overflow: hidden才生效，否则多余行会溢出 - 兼容性：Chrome 68+、Firefox 68+、Safari 12+ 支持；IE 完全不支持
想阻止用户输入超过 N 行？textarea 没内置方案，得 JS 监听
HTML 标准里没有 “最大行数” 属性。所谓“限制行数”，本质是限制换行符 \n 的数量。这只能靠 JS 在 input 或 keydown 事件里判断并截断。
容易踩的坑：只监听 keydown 会漏掉粘贴（paste）、拖入文本、右键粘贴等场景；只截断字符串末尾可能破坏光标位置。
- 必须监听
input事件（覆盖所有输入方式） - 检查
value.split('\n').length是否超过阈值，超了就slice()掉最后一段含换行的内容 - 别忘了同步重置
scrollTop，否则滚动条可能卡在底部导致看不到顶部内容
为什么不用 maxlength 代替行数限制？
maxlength 控制的是字符总数，不是行数。一行写满 50 个汉字，三行就是 150 字；但如果用户只打空格、回车或英文，同样三行可能才 20 字符。两者语义完全不同。
性能影响很小，但逻辑错位会导致体验断裂：用户以为“还能输 100 字”，结果第 2 行末尾按了个回车，整个输入被截断，毫无提示。
-
maxlength适合防爆库、字段长度校验 - 行数限制适合阅读节奏控制（如弹幕、短评、表单摘要）
- 二者可以共存，但不能互相替代
