加min-width: 0是硬性前提，必须作用于flex直接子元素（如.title），配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis及明确宽度（如max-width: 100%或flex: 1 1 0）才生效。
为什么加了 overflow: hidden 和 text-overflow: ellipsis 还是撑破？
不是属性没写对，而是浏览器压根没走到裁剪逻辑——flex 子项默认有 min-width: auto，它把一串长 URL 或连续英文当做一个不可分割的整体，宁可把整个容器拉宽，也不缩自己。你在 DevTools 的 Computed 面板里看到的 min-width 值如果是 auto 或几百像素，就说明这一步根本没生效。
min-width: 0 必须加在哪儿？
只加在 flex 容器上无效；必须加在**直接含文本的子元素**上，比如 .title、.desc 这类 <div> 或 <code><p></p>，而不是它的父容器或孙子节点。
- ✅ 正确：
.item > .text { min-width: 0; } - ❌ 无效：
.item { min-width: 0; }（这是父容器，不影响子项收缩） - ⚠️ 嵌套场景下，如果
.text内部又用了display: flex，那它里面的文字块也得单独加min-width: 0 - 别写
min-width: 0px或min-width: 0%，部分旧版 Safari 可能不认，只用min-width: 0
光有 min-width: 0 不会自动显示省略号
它只是打开收缩开关，真正让省略号出现还得四件套齐备，且必须写在同一元素上：
-
white-space: nowrap：防止文字提前换行，否则连“单行溢出”前提都没了 -
overflow: hidden：裁剪动作本身，加在父容器上没用 -
text-overflow: ellipsis：只对块级元素生效，所以得配display: block或inline-block - 明确宽度约束：靠
max-width: 100%、width，或者更稳的flex: 1 1 0（第三个参数是像素值，起点确定）
常见错误：flex: 1 等价于 flex: 1 1 0%，百分比依赖父宽计算，而渲染时父宽可能未定，导致宽度推导异常。
长单词/URL 换行要额外处理
省略号只适用于单行截断；如果业务允许换行，min-width: 0 是前提，但还得加换行规则：
-
overflow-wrap: break-word：优先在空格、斜杠、点后断，适合用户可见链接、邮箱 -
word-break: break-all：兜底用，对无断点字符串（如哈希、base64）强制切开 - 移动端要双写：
word-wrap: break-word（兼容 iOS 11 及更早） +overflow-wrap: break-word - 别用
word-break: break-word——已废弃，现代浏览器不保证支持
最常被忽略的是父容器没设 width 或 max-width：如果容器宽度无限，就没有“溢出”，所有规则都白配。
