overflow-x: hidden 未生效主因是父容器缺宽度约束或子元素 white-space: nowrap 未配 text-overflow: ellipsis；需确保父容器有 width/max-width，长单词加 word-break，flex 子项设 min-width: 0，移动端慎用 user-scalable=no 并下沉溢出控制。
overflow-x: hidden 为什么没生效
常见现象是加了 overflow-x: hidden，但文字或内联元素依然撑开父容器、横向滚动条还在。根本原因通常是父容器没设 width 或 max-width，或者子元素用了 white-space: nowrap 却没配 text-overflow: ellipsis。
实操建议：
- 父容器必须有明确的宽度约束（
width、max-width或受 flex/grid 限制），否则overflow无参照系 - 若子元素含长单词或 URL，需额外加
word-break: break-word或overflow-wrap: break-word -
overflow-x: hidden对display: inline-block子项无效？检查是否因空白符产生隐式间隙，改用font-size: 0或移除换行符
text-overflow: ellipsis 要生效的三个硬条件
只写 text-overflow: ellipsis 永远不显示省略号——它只是“最后一招”，前面缺一不可。
必须同时满足：
立即学习“前端免费学习笔记（深入）”；
- 容器宽度固定（
width或max-width） -
white-space: nowrap（阻止换行） -
overflow: hidden（或overflow-x: hidden）
漏掉任意一条，就只看到被截断的文字或直接溢出。注意：它只对单行有效；多行省略得用 display: -webkit-box 配合 -webkit-line-clamp，且仅 WebKit 内核稳定。
flex 容器里内容溢出的典型陷阱
在 display: flex 的父容器中，子项默认会伸缩（flex-shrink: 1），但遇到 min-width: auto（如图片、input、button）时，收缩会失效，导致横向溢出。
解决方向：
- 给可能撑开的子项显式设
min-width: 0（覆盖浏览器默认的min-width: auto） - 避免对 flex 子项用
width: 100%，优先用flex: 1或flex: 0 1 auto - 如果父容器本身是响应式宽度（如
width: 100vw），检查是否被根字体大小或缩放影响，可加box-sizing: border-box
移动端 viewport 和 overflow 的冲突
在 iOS Safari 上，即使写了 overflow-x: hidden，用户仍可能通过双指拉伸触发横向滚动——这不是 CSS 失效，而是浏览器把整个页面当成了可缩放区域。
关键控制点：
-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">中user-scalable=no能禁双指缩放，但会损害可访问性，慎用 - 更稳妥的是确保 body 和根容器没有隐式宽于视口（比如未重置的
margin、padding或浮动残留） - iOS 15+ 对
overflow: hidden在上的支持仍不稳定，建议把溢出控制下沉到具体容器，而非依赖 body
最常被忽略的一点：盒模型里的 border 和 padding 会增加实际占用宽度，用 box-sizing: border-box 是基础，但很多人只加在自己写的类上，忘了重置第三方组件或 input 等原生元素的默认 box-sizing。
