必须给含文本的Flex直接子元素加min-width: 0，否则浏览器因默认min-width: auto锁定最小宽度（如长URL、哈希值），拒绝收缩，导致white-space: nowrap、overflow: hidden、text-overflow: ellipsis等所有截断逻辑失效。
必须给含文本的 Flex 直接子元素加 min-width: 0，否则所有截断、换行规则都无效——浏览器根本不会触发溢出逻辑。
为什么 min-width: 0 是绕不开的第一步
Flex 子项默认有 min-width: auto（等价于 min-width: fit-content），它会把一串无空格的 URL、base64 或哈希值（如 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9）当做一个不可分割的整体，宁可撑破父容器，也不缩自己。你在 DevTools 的 Computed 面板里看到的 min-width 如果还是 auto 或几百像素，就说明这一步没生效。
这个值只能加在 Flex 容器的**直接子元素**上，比如 .item > .title 或 .desc；加在父容器（如 .container）或孙子节点（如 .title > span）上完全无效。
-
min-width: 0不是“让文字变省略号”的样式，它只是解锁收缩能力的开关 - 旧版 Safari（≤15.6）对
flex: 1隐含的min-width: 0支持不稳定，必须显式写 - 如果子项同时写了
flex-shrink: 0，min-width: 0会被忽略，得先删掉或改成flex-shrink: 1
text-overflow: ellipsis 不生效？缺这四个条件
单行省略号不是独立属性，它依赖四个条件同时成立，且必须写在同一元素上：
立即学习“前端免费学习笔记（深入）”；
-
white-space: nowrap：防止文字提前换行，否则连“单行溢出”前提都不满足 -
overflow: hidden：裁剪动作本身，但没min-width: 0时，子项压根不缩，overflow就无内容可裁 -
text-overflow: ellipsis：只对块级元素生效，所以得配display: block或inline-block - 明确宽度约束：不能只靠
flex: 1（它等价于flex: 1 1 0%，百分比依赖未定父宽），推荐用flex: 1 1 0（第三个参数是像素值，起点确定）或max-width: 100%
长单词 / URL 换行该用 overflow-wrap 还是 word-break？
这不是二选一，而是按语义分层处理：
- 用户可见文本（长链接、邮箱、带连字符的术语）→ 主用
overflow-wrap: break-word，它只在整词放不下时才断，观感合理 - 技术字段（token、日志 ID、API 路径、哈希串）→ 加兜底
word-break: break-all，防止overflow-wrap在无可断点时失效 - 中文为主或中英混排正文 → 用
word-break: break-word（注意不是break-all），它对中文按字断、英文保词义 - 绝对别用
word-break: break-word单独写——已废弃，现代浏览器不保证支持
移动端要双写：word-wrap: break-word（兼容 iOS 11 及更早） + overflow-wrap: break-word（现代标准）。
最容易被忽略的宽度约束和嵌套陷阱
再完整的样式组合，如果漏掉以下任一条件，依然会撑破：
- 父容器本身没设
width或max-width（比如display: flex但没max-width: 100%），子项就会撑满视口，所有“溢出”都失去意义 - 嵌套 Flex 场景下，内层容器（如头像+文字块）也得单独加
min-width: 0，不能靠外层“传染” -
flex-direction: column时，min-width: 0不影响垂直方向，但文本截断/换行仍在水平方向发生，所以子项自己得设max-width: 100% - 表格中用
overflow-wrap必须配table-layout: fixed+ 列宽（如td { width: 200px; }），否则忽略
真正卡住布局的，往往不是你没写什么，而是你没检查 min-width 是否真为 0px，以及宽度边界是否真实存在。
