cols属性按浏览器默认等宽字体（如monospace）下1个ASCII字符的平均宽度计算，表示约可并排显示的字符数；中文等全角字符占2倍宽度，实际显示数量减半，且该属性仅为初始渲染提示，不强制限制输入或换行。
cols属性到底按什么算字符宽度
cols 不是像素，也不是屏幕字符数，而是指“平均字符宽度”的列数。浏览器默认用等宽字体（如 monospace）的 1 个字符宽度作为基准，比如 cols="40" 表示能并排显示约 40 个 ASCII 字符（如英文、数字、半角符号）。中文、全角标点、emoji 通常占 2 倍宽度，所以实际能输入的中文字符数往往只有 cols 值的一半左右。
关键点：cols 是纯提示性属性，不强制限制输入长度，也不影响换行逻辑——它只影响初始渲染宽度和表单重置时的默认尺寸。
- 如果设
cols="10"，但用户粘贴了 50 个汉字，textarea 会水平滚动或撑开（取决于overflow和resize设置） - 字体变了（比如改成
font-family: "Microsoft YaHei"），实际可见字符数会变，但cols值不变 - 响应式页面中，
cols容易被 CSS 的width覆盖，优先级低
什么时候该用cols而不是CSS width
用 cols 的典型场景是：需要让 textarea 宽度与内容预期长度对齐，且不依赖外部样式（比如邮件模板、CMS 后台表单、纯 HTML 表单导出）。它在无 CSS 或 CSS 失效时仍能提供基本可读尺寸。
但多数现代项目建议用 CSS 控制宽度：
立即学习“前端免费学习笔记（深入）”；
- 用
style="width: 100%"或 class 配合max-width更灵活 -
cols对移动端适配几乎无效，无法响应屏幕变化 - 若同时设了
cols="30"和style="width: 200px"，后者会生效，cols仅作 fallback
常见错误：设了cols但没效果
最常遇到的是 CSS 覆盖了 cols。比如 Bootstrap 默认给 textarea 加了 width: 100%，此时无论 cols="50" 还是 cols="5" 都看不出差别。
- 检查 computed styles，看
width是否被设为具体值或百分比 - 临时加
!important测试：style="width: auto !important"，再观察cols是否起作用 - 某些 UI 库（如 Ant Design、Element Plus）会忽略
cols，直接用 props 控制宽度 - Firefox 中若父容器
display: flex且未设min-width: 0，cols可能被压缩到最小
替代方案：用ch单位更靠谱
想真正按字符数控制宽度，ch 单位比 cols 更可控：1ch = 当前字体下 “0” 字符的宽度。它受字体影响，但能真实反映文本流宽度。
例如：style="width: 40ch" 在多数字体下比 cols="40" 更接近预期宽度，且支持响应式（配合 max-width: 100%）。
-
ch在 Safari 6+、Chrome 30+、Firefox 13+ 支持良好，IE 不支持 - 避免用
ch配合非等宽字体（如 “微软雅黑”），因为 “0” 和 “我” 宽度差异大，会导致估算偏差 - 如果必须兼容 IE，老办法仍是
cols+style="width: auto"组合，并接受一定误差
cols、CSS width、父容器约束、字体度量共同决定，没有单一解。别指望设个 cols 就万事大吉，尤其当设计稿要求“刚好显示 20 个中文”时，得实测不同字体下的表现。 
