cols="50"视觉宽度不准，因其单位是“平均字符宽度”，按等宽字体英文字符估算，而中文比例字体（如微软雅黑）单字更宽，实际仅容25–30字；真实尺寸应由CSS的width、min-height等控制。
为什么直接设 cols="50" 宽度看起来不对
因为 cols 的单位是“平均字符宽度”，不是像素，也不是中文字符个数。它默认按等宽字体（比如 Courier New）中一个英文字符的宽度估算，而你页面用的很可能是 "Microsoft YaHei" 或 "Segoe UI" 这类比例字体——汉字更宽，实际能塞下的字远少于 50 个，通常只有 25–30 个。改了 font-size 或 line-height 后，cols 对应的视觉宽度还会漂移。
cols 和 style.width 能不能一起用
能，但要小心覆盖逻辑：
- 如果同时写了
cols="50"和style.width="400px"，CSS 的width会生效，cols仅作为辅助技术（如屏幕阅读器）的语义参考 - 若只写
cols="50"不写 CSS，浏览器会按内部字符宽度换算成像素，结果因字体、DPI、缩放比例差异极大 - 在 flex/grid 布局里，
cols几乎无效——容器会优先按 CSS 尺寸约束 textarea，cols只影响内容区初始渲染的“建议宽度” - IE11 及更早版本不支持
min-height在textarea上可靠生效，此时cols/rows是唯一可用的尺寸锚点，但必须配overflow: auto防内容被截
现代项目里 cols 应该设多少
设一个合理 fallback 值，而不是试图“精确控制”：
- 保留
cols="30"或cols="40"，供辅助技术读取语义信息（WCAG 要求） - 不要设
cols="100"或cols="1"这类极端值，某些旧浏览器会触发怪异换行或滚动条错位 - 如果用了自定义字体，务必在 CSS 中同步重置
font-family和font-size，否则cols渲染完全失准 - 纯代码编辑场景（如简易 JSON 编辑器）可加
font-family: monospace，这时cols="80"才有接近预期的对齐效果
真正该用什么控制显示宽度
用 CSS：width + min-height + resize 组合才是可靠方案：
- 写
width: 100%或具体像素值（如width: 500px），别依赖cols - 高度用
min-height: 80px，而非height: 80px—— 固定 height 会截断内容，且无法随输入增长 - 加
resize: vertical允许用户手动拉伸，或resize: none禁用拖拽（需配合 JS 自适应高度） - 避免
style="width: 100%; height: 120px;"这种内联写法，它既难维护，又和响应式冲突
最常被忽略的一点：即使你用 JS 实现了自动撑高（监听 input 并设 height = scrollHeight），也得先清掉 height 内联样式再赋值，否则第一次 resize 后 height 会被卡死。
