必须在Grid子项上显式设min-width: 0，否则默认min-width: auto会锁死最小宽度，导致white-space: nowrap、overflow: hidden和text-overflow: ellipsis全部失效。
Grid子项没设min-width: 0，省略号根本不会触发
Grid子项默认min-width: auto，等价于“至少容纳全部文字”，哪怕父容器只有100px宽，它也优先撑开自己。结果overflow: hidden形同虚设——没有溢出，text-overflow: ellipsis就只是个摆设。这不是写法错，是浏览器压根没走到截断逻辑。必须在目标文本元素上显式加min-width: 0，这是开关，不是可选项。
white-space: nowrap漏了，其他全白搭
只写text-overflow: ellipsis和overflow: hidden，但没禁用换行，文本会提前折行，根本不会水平溢出。常见陷阱包括：父Grid容器用了grid-auto-flow: row却忘了子项自身要white-space: nowrap；或子项是span之类行内元素，没配display: block或inline-block。确认以下三点同时存在：
white-space: nowrapoverflow: hiddentext-overflow: ellipsis
宽度约束没落在正确元素上
Grid轨道尺寸不等于子项尺寸。比如写了grid-template-columns: 1fr 2fr，但子项没设width或max-width，它仍会按内容撑开。解决方法：
- 给子项直接设
width: 100%或max-width: 100%（注意：百分比需有明确计算上下文） - 或用
grid-template-columns: 1fr minmax(0, 1fr)让第二列允许收缩到0 - 避免用
fit-content或max-content定义轨道，它们会绕过宽度约束
Flex嵌套Grid或Grid嵌套Flex时，min-width要逐层检查
如果Grid子项内部又套了Flex容器，而文本在Flex子项里，那min-width: 0得加在**最内层文本元素上**，而不是Grid子项本身。因为截断发生在最终渲染文本的块级元素上。容易被忽略的是：某些旧版Safari在多层Flex嵌套下还需额外加min-height: 0，但仅限于该场景。别假设“父层设了就万事大吉”——每层布局容器都可能悄悄重置min-width。
立即学习“前端免费学习笔记（深入）”；
