resize: none是禁用textarea拖拽的唯一可靠方式，但必须作用于真实textarea元素、配合overflow: auto/hidden/scroll且不被更高优先级样式覆盖。
直接写 resize: none 就行，但必须作用在 textarea 元素本身，且不能被更高优先级样式覆盖 —— 这是唯一可靠方式，其他写法基本都失效。
为什么 resize: none 有时不生效？
常见现象：加了样式却还能拖，右下角手柄照常显示。根本原因不是语法错，而是 CSS 生效链断了。
- 被框架样式覆盖（如 Bootstrap 默认设
textarea { resize: vertical; }），你写的规则没加!important或选择器不够具体 - 父容器设置了
overflow: visible，干扰了resize的触发条件（该属性只对overflow为auto、scroll或hidden的元素生效） - UI 库（如 Element Plus、Ant Design）把
textarea包在div里，你写的textarea { resize: none; }没命中真实渲染的元素 - 误写成
resize: disabled或resize: false—— 这俩值非法，浏览器直接忽略
验证是否真正生效：打开开发者工具 → 查看该 textarea 的 “Computed” 面板 → 找 resize 属性，确认值为 none。
resize 的合法值和实际效果差异
resize 只有四个合法值：none、both、horizontal、vertical。别信“禁用水平就等于安全”这种误解。
立即学习“前端免费学习笔记（深入）”；
-
resize: none：彻底禁用所有方向拖拽，推荐首选 -
resize: vertical：仍可上下拉高，极易撑破容器高度，破坏响应式布局 -
resize: horizontal：极不推荐，拉宽后换行逻辑不变，文字会横向溢出或触发难看的overflow-x: scroll -
resize: both：等同于默认行为，没必要显式写
注意：resize 对 overflow: visible 的元素无效 —— 而 textarea 默认是 overflow: auto，所以通常没问题；但如果你手动改过 overflow，就得同步检查。
内联 style 和 class 写法哪个更稳？
内联写法最不容易被覆盖，适合快速验证或关键表单字段：
<textarea style="resize: none; width: 100%; height: 120px; overflow-y: auto;"></textarea>
用 class 更利于维护，但要注意优先级：
- 避免只写
.no-resize { resize: none; }就完事 —— 很可能被第三方 CSS 覆盖 - 提高选择器权重：比如用
textarea.no-resize或textarea.form-input - 必要时加
!important，尤其集成 UI 库时：textarea.no-resize { resize: none !important; }
别试图用 HTML 属性禁用：<textarea resize="none"> 完全无效，resize 是纯 CSS 属性，HTML 中无对应属性。
禁用拉伸后，内容撑大怎么办？
禁用 resize 只管鼠标拖拽，不管内容增长。用户狂敲回车或粘贴长文本，textarea 仍可能视觉上“变高”（尤其没设 height 或 max-height 时）。
- 固定高度 + 滚动：设
height: 120px; overflow-y: auto;，内容超长自动出滚动条 - 弹性上限：用
max-height: 200px; min-height: 80px; overflow-y: auto;，兼顾最小可用性和内容上限 - 别只设
rows和cols：它们是提示性 HTML 属性，渲染受字体、行高、padding 影响极大，跨浏览器不一致 - 移动端 Safari 不显示拖拽手柄，但部分 iOS 版本支持长按+拖动缩放 —— 这是系统级行为，
resize: none无法拦截，只能靠 UX 提示规避
真正稳定的方案永远是：CSS 控制尺寸 + resize: none + overflow-y: auto 三者配合。单独依赖任一环节，都容易在某个浏览器或场景下翻车。
