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 里打字时被卡住。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 对 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 适合防爆库、字段长度校验
• 行数限制适合阅读节奏控制（如弹幕、短评、表单摘要）
• 二者可以共存，但不能互相替代

事情说清了就结束。行数限制这事，核心在于分清“显示截断”“输入拦截”“字符上限”三个不同目标，选错技术路径，后面补救成本远高于一开始想清楚。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！