移动端overflow:hidden失效的根本原因是容器缺乏“可裁剪性”：缺显式宽高、未触发bfc、或flex子项min-width:auto锁死宽度，三者居一即失效。
移动端 overflow: hidden 失效不是因为你写错了，而是它根本没被浏览器当作有效裁剪指令——缺显式宽高、没触发 BFC、子项锁死 min-width: auto，三者占其一，就白写了。
为什么加了 overflow: hidden 还是溢出？
根本问题不在 overflow 本身，而在容器是否具备「可裁剪性」：
- 父容器没设
width或height（比如只写width: 100%嵌在 flex 里），iOS Safari 直接忽略overflow - 容器未触发 BFC：
display: block不够稳，改用display: flow-root更可靠 - 子元素是
position: absolute或float，它们脱离文档流，overflow: hidden对它们无效 - Flex 子项默认
min-width: auto，长 URL 或连续英文直接撑开，必须显式写min-width: 0
Flex 布局下文字/按钮溢出怎么截断？
光靠 overflow: hidden 没用，得配齐「截断三件套」并锁定收缩能力：
- 直系 flex 子项必须加
min-width: 0（不是父容器） -
white-space: nowrap（单行）或overflow-wrap: break-word（多行） -
overflow: hidden+text-overflow: ellipsis（仅对nowrap生效） - 按钮类元素额外加
flex-shrink: 0防止被压缩变形，但要确保父容器有明确max-width
视频、图片、iframe 溢出为啥 overflow: hidden 不管用？
这些元素自带渲染特性，会绕过父容器的裁剪逻辑：
-
<video></video>必须加width: 100%; height: 100%，且父容器要有aspect-ratio或固定height；object-fit: cover只管填充，不管边界 -
<img>默认是 inline 元素，底部有基线间隙，加display: block或vertical-align: top -
<iframe></iframe>必须显式设width: 100%; height: 100%，否则按固有尺寸渲染，溢出不可控 - 所有含
transform的子元素（如scale()），overflow: hidden在 Safari 下大概率失效，要把 transform 移到子容器上
真机测试最容易忽略的三个点
模拟器跑得通 ≠ 真机能用。iOS Safari 的行为和桌面 Chrome 差异极大：
- 别在
或上写overflow: hidden，Safari 会无视——要用position: fixed遮罩层替代 - 滚动容器内加
overflow: hidden，必须同步设overflow-y: auto，否则 iOS 会穿透滚动到 body - 动态插入内容（如图片加载后）再加
overflow: hidden，可能已触发滚动条占位，导致布局跳动；建议初始就设好，或用clip-path: inset(0)强制像素级裁切
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
