resize: none 是禁用 textarea 右下角拖拽缩放的最直接可靠方式，必须作用于 textarea 元素本身并配合 overflow: auto 或 hidden 才生效，现代浏览器全支持，ie9 及更早版本天然不支持故无需处理。
textarea 怎么禁用右下角拖拽缩放
直接加 resize: none 就行，这是最常用也最可靠的方案。它作用于 textarea 元素本身，不是父容器，也不是伪类。
常见错误是写成 resize: disabled 或 resize: false —— 这俩都不合法，浏览器会忽略。CSS 中只有 none、both、horizontal、vertical 这几个有效值。
- 必须写在
textarea的样式里，比如内联 style、class 或 ID 选择器，不能只写在div上 - 如果用了 CSS 框架（如 Bootstrap），可能被其默认样式覆盖，需要加
!important或提高选择器优先级 - 移动端 Safari 有时对
resize支持不稳定，但禁用拖拽本身仍生效（只是视觉反馈弱）
要不要同时限制宽高固定
禁用拖拽后，用户仍可通过键盘输入撑大区域（尤其内容多时），所以通常要配合尺寸控制。否则容易破坏布局。
textarea 默认是可弹性伸缩的，即使禁了 resize，它的 height 仍可能随内容增长（取决于 rows 和 overflow 设置）。
- 设固定
height+overflow: auto：内容超长时出现滚动条，体验最可控 - 用
max-height+overflow: auto：比固定 height 更灵活，适合内容长度不确定的场景 - 避免只设
width不管height：容易导致文字换行异常或横向溢出
有没有兼容老版本 IE 的写法
IE10+ 都支持 resize，IE9 及更早版本压根不支持该属性，也就不存在拖拽行为 —— 所以你什么都不用做，IE9 自然“禁用”了。
但要注意：IE 下 textarea 的默认边框和内边距和现代浏览器不同，如果统一禁用 resize 后发现尺寸不一致，大概率是 box-sizing 或 padding 没归一化。
- 推荐统一加
box-sizing: border-box，避免 width/height 计算偏差 - IE 下
resize不生效 ≠ 布局安全，仍需检查min-height、line-height等影响高度的因素
React/Vue 项目里怎么写才不被框架样式覆盖
框架组件库（比如 Ant Design、Element Plus）常给 textarea 包一层 wrapper，并注入自己的 class，这时候直接写 textarea { resize: none } 可能失效。
优先用组件自带的 prop 控制（如 Ant Design 的 autoSize={false}），没提供时再上 CSS。
- Vue 单文件组件中，用
<style scoped></style>时，要写成:deep(textarea) { resize: none; } - React 中若用 styled-components，选中器写成
textarea即可；用 emotion 可用css插件注入全局规则 - 如果用了 Tailwind，直接加
resize-noneclass，它编译后就是resize: none
overflow，导致内容撑破容器或文字被截断。这不是 bug，是预期行为 —— 浏览器只管禁拖拽，不管你怎么展示内容。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
