overflow: hidden 有时无效，是因为父容器未设宽度约束或未触发BFC；需配合width/max-width、display: flow-root等强制创建BFC，并协同min-width: 0、word-break等控制子项收缩与换行。
元素在小屏幕溢出时
为什么有时没用？
直接加
不生效，往往是因为父容器没设置宽度约束或未触发 BFC。CSS 溢出裁剪只对「块级格式化上下文（BFC）」内的内容起作用，而默认的
在某些情况下（比如浮动、绝对定位或
）并不自动创建 BFC。
实操建议：
确保父容器有明确的宽度限制，比如
或
强制触发 BFC：添加
（本身）、
（推荐）、或
避免在父元素上同时使用
和未限制宽度的内联内容，这会撑宽容器导致隐藏失效
用
控制图片/卡片等常见元素尺寸
是响应式图像和媒体元素的基石，但它只对替换元素（如
、
）或设置了
的块级元素生效；对纯文本容器或 flex 子项需额外处理。
常见场景与写法：
立即学习
“
前端免费学习笔记（深入）
”；
图片自适应：
卡片类容器：
（防止内容过宽时突破视口）
配合
，避免 padding/border 加到
外导致溢出
Flex 容器中子项溢出的典型陷阱
Flex 布局下，
默认开启，但若子项含不可压缩内容（如长单词、
、未设
的
），仍会溢出。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
关键修复点：
给 flex 子项加
（让文本可折行、内容可收缩）
对可能溢出的文本容器，补充
或
慎用
—— 它会完全禁用折行，即使有
也无效
移动端真机测试常被忽略的细节
开发时在 Chrome 模拟器看到正常，真机却溢出，大概率是 viewport 设置或缩放行为干扰了计算。
必须检查：
是否缺失或被覆盖
iOS Safari 对
或
的默认最小宽度（约 150px），可能撑开 flex 容器
第三方 UI 库（如 Ant Design、Element Plus）的组件自带固定
，需用
覆盖或用
重置
最稳妥的方式不是靠单一属性“堵”，而是从容器宽度、子项收缩性、文本换行三者协同控制——漏掉任何一环，
都只是假装解决问题。
overflow: hiddenoverflow: hiddendivdisplay: inline-blockwidth: 100%max-width: 100%overflow: hiddendisplay: flow-rootcontain: layoutwhite-space: nowrapmax-widthmax-width: 100%widthimg { max-width: 100%; height: auto; }.card { max-width: 100vw; width: fit-content; }box-sizing: border-boxmax-widthflex-shrink: 1min-width: 0divmin-width: 0word-break: break-wordoverflow-wrap: break-wordwhite-space: nowrapmax-width/* 示例：安全的 flex 卡片布局 */
.card-container {
display: flex;
gap: 12px;
}
.card {
flex: 1;
min-width: 0; /* 关键！允许收缩 */
overflow: hidden;
}
.card p {
overflow-wrap: break-word;
margin: 0;
}input[type="number"]textareamin-width!importantfit-contentoverflow: hidden