min-width: 0 是解决 flex 中长 url 撑开布局的起点，因其覆盖默认 min-width: auto（即 min-content），使 flex-shrink 能生效；必须作用于 flex 直接子元素，并与 white-space: nowrap、overflow: hidden、text-overflow: ellipsis 及明确宽度约束共存才完整生效。
min-width: 0 是唯一能真正约束长 URL 撑破 Flex 容器的起点，不加它，后面所有截断规则都无效。
为什么长 URL 会顶开整个 Flex 布局？
浏览器对 Flex 直接子项默认设了 min-width: auto，它把长 URL 当作不可折行的“最小内容宽度”（min-content），哪怕父容器只有 200px，也会强制撑到 URL 全长。这不是 bug，是规范行为——overflow: hidden 根本没机会触发，因为“溢出”在布局计算阶段就被跳过了。
- 常见现象：
text-overflow: ellipsis不显示、white-space: nowrap下仍换行、图标被挤出视口、横向滚动条意外出现 - DevTools 中检查 computed
min-width，若仍是auto，基本锁定是这个问题 - 不是
word-break或overflow-wrap能解决的——它们只影响渲染时的换行，不影响 Flex 的初始尺寸计算
必须加在哪个元素上？
只对 display: flex 的**直接子元素**生效，且必须加在你希望截断的那个文本容器上，比如 <p class="url"></p> 或 <span></span>，写在父容器或孙子节点上完全无效。
- 动态 class 场景下（如
className={`item ${isTruncated ? 'truncate' : ''}`}），确保min-width: 0在激活态下生效，否则白写 - 嵌套 Flex 场景（如头像 + 文字块再包一层 flex），内层文字块也要单独加
min-width: 0，不会继承 - 若用
<a href="..."></a>包 URL，样式必须作用于该<a></a>元素本身，而非外层 wrapper
光加 min-width: 0 还不够
min-width: 0 只是“打开收缩开关”，要让省略号真正出现，必须四者共存：
-
min-width: 0（解除 Flex 默认锁定） -
white-space: nowrap（禁止换行，确保单行溢出） -
overflow: hidden（裁剪动作，必须加在同一元素上） -
text-overflow: ellipsis（仅渲染省略号，依赖前三者）
另外，该元素必须有明确宽度约束：max-width: 100%、flex: 1 1 0 或显式 width。避免用 flex: 1（等价于 flex: 1 1 0%），因百分比 flex-basis 在渲染前无法确定基准，容易卡住。
移动端和 Safari 的兼容细节
旧版 Safari（尤其是 iOS 15 及更早）对 flex-basis: 0 解析有偏差，建议兜底写法：
- 用
flex: 1 1 0而非flex: 1 - 显式补
min-width: 0，不要依赖flex-basis: 0自动覆盖 - 避免
min-width: 0px或min-width: 0%，部分旧版 Firefox/Safari 会失效 - 若 URL 里含特殊字符（如
%20或中文），确认未被unicode-bidi或direction干扰计算
最常漏掉的是：父容器没设 width 或 max-width，导致 Flex 容器按内容自适应，根本不存在“溢出”前提；或者把 overflow: hidden 错加在最外层 wrapper 上，而不是实际发生溢出的文本元素本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
