rows和cols是基于默认等宽字体下字符数的估算单位，非像素值；rows表示约可显示的行数，cols表示约可容纳的英文字符宽度，实际尺寸受字体、css等影响，仅作语义fallback。
直接在 <textarea></textarea> 标签里写 rows 和 cols 属性，就能设置文本域的初始显示行数和列宽——但它们不是像素值，而是基于默认等宽字体下字符数量的估算。
rows 和 cols 是什么单位
它们不等于高度或宽度的像素值，也不代表最大输入字数：
- rows="5" 表示浏览器按当前字体、行高、padding 等，估算出“约能显示 5 行文字”的初始高度；实际像素高度因浏览器和样式而异（通常 1 行 ≈ 20–25px）
- cols="40" 表示按默认等宽字体（如 monospace）下，每行大约显示 40 个英文字符的宽度；换成微软雅黑或思源黑体后，中文可能只能显示 20–25 个字
- 这两个属性只影响初始渲染尺寸，一旦加了 CSS 的
width、height、min-height，就会被覆盖
怎么写才有效果
基础写法很简单，但要注意语义与表现分离：
- 直接写：
<textarea rows="4" cols="50"></textarea> - 推荐保留合理 fallback 值（供屏幕阅读器识别或旧浏览器兜底），例如
rows="4"和cols="30" - 避免极端值，比如
cols="1000"或rows="100"，在 IE 或某些移动端易错位或触发异常滚动条 - 若用了自定义字体（如
font-family: "PingFang SC"），cols就基本失去参考意义，此时应完全依赖 CSS 控制宽度
常见误区和替代方案
纯靠 rows/cols 控制尺寸，在现代项目中容易翻车：
- 改了
font-size: 18px后，rows="4"可能只剩 2 行可见内容 - 放在 Flex 或 Grid 容器里，
cols常被忽略，文本域被压缩成一条线 - 用户输入长内容后，无法自动撑开，必须靠
min-height+resize或 JS 动态适配 - 真正可控的做法：用
width: 100%或具体像素设宽；用min-height: 80px; max-height: 200px;设高；加resize: vertical;允许拉伸；别忘box-sizing: border-box;
兼容旧浏览器的小技巧
针对 IE11 或更老环境（不支持 min-height 或 resize）：
- 可把
rows设为略大于常用行数（如常用 3–4 行，设rows="5"） -
cols可参考实测值：cols="50"在多数系统下视觉宽度约 300–400px - 搭配
overflow: auto;防止内容溢出不可见 - 禁用拉伸时（
resize: none），务必确保min-height足够，否则用户看不到完整输入内容
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
