加 min-width: 0 是触发文本截断的必要前提，因 Flex 子项默认 min-width: auto 会阻止压缩；text-overflow: ellipsis 需同时满足块级、内容溢出、overflow: hidden 三条件；flex: 1 1 0 比 flex: 1 更可靠，因 flex-basis: 0px 避免宽度计算依赖；长英文/URL 需补充 word-break: break-word。
加 min-width: 0 是唯一能真正触发截断的起点，不加它，text-overflow: ellipsis、overflow: hidden 全部失效。
为什么 min-width: 0 必须写在文本元素上
Flex 子项默认 min-width: auto，浏览器会强制它至少显示完整单词或 URL，哪怕父容器只有 100px 宽，它也拒绝压缩——结果就是文字把整个 flex 容器顶宽，旁边图标全被挤跑。
- 必须加在直接包裹文本的元素上，比如
<p class="title">或<span class="name"> - 加在父容器（如
.list-item）上完全无效，flex 收缩逻辑只检查直接子项自身的min-width计算值 - DevTools 中检查 computed 样式，如果
min-width仍是auto，说明没生效，先回头确认 selector 是否写错 -
min-width: 0px或min-width: 0%在旧版 Safari/Firefox 中可能不认，只用min-width: 0（无单位）
text-overflow: ellipsis 不显示省略号？缺这三样就白配
text-overflow: ellipsis 不是开关，它只在满足三个硬性条件时才画点：目标元素是块级、内容真溢出了、且溢出部分被裁剪了。漏掉任意一个，省略号永远不出现。
-
white-space: nowrap必须加在同一元素上，否则文字提前折行，根本没机会“单行溢出” -
overflow: hidden必须加在同一元素上——不是父容器，也不是 wrapper 层；加错层级等于没加 - 该元素必须有明确宽度约束：
max-width: 100%、flex: 1 1 0或显式width；纯flex: 1（等价于flex: 1 1 0%）在渲染前无法确定基准，容易卡住 - 行内元素（如默认
<span>）不生效，需先加display: block或display: inline-block
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更适应响应式
含长 URL 或连续英文单词时还撑开？补 word-break: break-word
纯英文、URL、无空格字符串（如 https://example.com/very-long-path）即使加了所有规则，仍可能撑开容器——因为浏览器默认不拆分这类字符串。
- 加
word-break: break-word（等价于overflow-wrap: break-word），只在必要时才折行，语义安全 - 避免用
word-break: break-all，它会把单词从中间劈开，破坏可读性 - 嵌套 flex 场景下（比如头像 + 文字块再包一层 flex），内层文字块也要单独加
min-width: 0，不会继承外层设置 - 父容器本身没设
width或max-width—— 如果容器宽度无限，就不存在“溢出”，所有截断逻辑都失去意义
