必须设置具体 height 值(如 120px)并配合 overflow-y: auto 才能触发滚动条,rows 属性仅影响初始高度估算,不控制滚动;layui 中需用 .layui-form-text textarea { height: 120px !important; overflow-y: auto !important; } 覆盖默认样式。

layui文本域(textarea)如何让内容超出行数后显示滚动条
直接给 textarea 设 rows 属性只能控制默认显示行数,不会自动触发滚动;真正起作用的是 CSS 的 height + overflow-y: auto 组合,且必须限制容器高度才能出现滚动条。
为什么设了 rows="5" 还是不滚动
rows 是 HTML 原生属性,仅用于初始渲染时估算高度,浏览器不据此触发滚动逻辑。Layui 的 textarea 默认没有固定高度,内容撑多高就多高,overflow 无从生效。
- 常见错误:只写
<textarea rows="5"></textarea>,没加任何样式 - 更隐蔽的干扰:父级元素有
overflow: hidden,把滚动条直接裁掉 - Layui 表单中若用了
layui-form-text类,它本身没设height,需手动覆盖
正确设置方式(纯 CSS 控制)
在页面中加一段内联或全局样式即可,无需改 Layui 配置:
.layui-form-text textarea {
height: 120px !important;
overflow-y: auto !important;
resize: vertical;
}
-
height必须是具体数值(如120px),不能用auto或百分比——否则滚动失效 -
!important是必须的,Layui 自带样式权重高,普通声明会被覆盖 -
resize: vertical允许用户手动拖拽调整高度,体验更友好 - 若想“约等于 5 行”,可用
line-height: 24px× 5 ≈120px作为基准值
配合 Layui 表单渲染的注意事项
如果你是用 form.render('textarea') 渲染的,上面 CSS 依然生效;但要注意两个边界情况:
- 动态加载内容后(比如 AJAX 填充),
textarea高度可能被 JS 重置,可加一句$('textarea').css('height', '120px')强制回填 - 移动端 Safari 对
textarea的height+overflow支持不稳定,建议补上-webkit-overflow-scrolling: touch - 别用
layui-textarea这类非官方类名——Layui 官方只有layui-form-text包裹容器,textarea本身无特殊 class
真正卡住的地方往往不是 Layui,而是你忘了给 textarea 设一个明确的、不可被继承覆盖的 height 值。











