加min-width: 0是硬性前提，必须作用于flex直接子元素，配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis及明确宽度（如max-width: 100%或flex: 1 1 0）才生效。
flex子项文字撑开容器，加min-width: 0是硬性前提
不加这句，后面所有截断规则都白搭。浏览器对 flex 子项默认设了 min-width: auto，意思是“至少得显示完整单词或 URL”，哪怕父容器只有 100px 宽，它也拒绝压缩——结果就是文字把整个 flex 容器顶宽，旁边图标、按钮全被挤跑。
必须把 min-width: 0 写在**目标文本元素上**，比如 <p class="title"></p> 或 <span class="name"></span>。写在父容器（如 .list-item）上完全无效，因为 flex 的收缩逻辑只检查直接子项自身的 min-width 计算值。
-
min-width: 0是唯一标准写法；min-width: 0px或min-width: 0%在部分旧版 Safari 或 Firefox 中可能失效 - 嵌套 flex 场景下（比如头像 + 文字块再包一层 flex），内层文字块也要单独加
min-width: 0，不会继承外层设置 - DevTools 里检查 computed 样式，如果
min-width仍是auto，说明没生效，先回头找 selector 是否写错
text-overflow: ellipsis 不显示省略号？缺这三样就失效
text-overflow: ellipsis 不是开关，它只在满足三个条件时才画点：目标元素是块级、内容真溢出了、且溢出部分被裁剪了。漏掉任意一个，文字就换行或撑开，省略号永远不出现。
-
white-space: nowrap必须加在**同一元素上**，否则文字提前折行，根本没机会“单行溢出” -
overflow: hidden必须加在同一元素上——不是父容器，也不是 wrapper 层；加错层级等于没加 - 该元素必须有明确宽度约束：
width、max-width，或靠flex: 1 1 0等推导出可预期宽度；纯flex: 1（等价于flex: 1 1 0%）在渲染前无法确定基准，容易卡住
flex: 1 和 flex: 1 1 0 实际效果差在哪
表面都是“占剩余空间”，但底层行为直接影响截断是否稳定：flex: 1 展开为 flex: 1 1 0%，其中 0% 是百分比，需依赖父容器当前宽度计算，而 flex 布局计算顺序中，父宽可能尚未确定，导致文字容器宽度推导异常。
flex: 1 1 0 中的 0 是像素值，等价于 flex-basis: 0px，强制从零开始分配空间，配合 min-width: 0 后，宽度才真正可控。
- 别用
flex: 0 1 200px这类带固定flex-basis的写法，小屏下反而更容易溢出 - 想保留基础宽度又允许压缩？用
flex: 1 1 auto+min-width: 0，比硬设min-width: 200px更适应响应式 - Safari 旧版本对
flex-basis: 0解析有偏差，必要时可补一句flex-basis: 0%兜底
长 URL 或无空格英文串仍撑开？补 word-break: break-word
即使上面全配齐，https://example.com/very-long-path 或 supercalifragilisticexpialidocious 这类字符串仍可能突破限制——浏览器默认不拆分它们。
此时必须加 word-break: break-word（或 overflow-wrap: break-word），它会在单词内合理断行，语义可接受，且兼容主流浏览器（Chrome 15+、Firefox 15+、Safari 9+）。
- 避免用
word-break: break-all，它会强行切开任意位置，破坏可读性，且不触发text-overflow: ellipsis - 如果业务要求严格单行（比如标签栏），那就不能靠断行，只能靠
min-width: 0+flex: 1 1 0+white-space: nowrap+overflow: hidden+text-overflow: ellipsis这套组合死守 - 移动端务必确认父容器有
max-width或受 viewport 限制；否则 flex 容器无限宽，“溢出”根本不存在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
