text-overflow: ellipsis在Grid子项中不生效的根本原因是min-width: auto阻止截断，必须显式设置min-width: 0才能触发溢出逻辑，配合white-space: nowrap、overflow: hidden和明确宽度约束三者缺一不可。
Grid子项text-overflow: ellipsis不显示，缺了min-width: 0
根本不是CSS写错了，而是浏览器压根没触发截断逻辑——Grid子项默认min-width: auto（表现接近min-content），会死守“至少容纳整段文字”的底线。哪怕父容器只有100px宽，它也优先撑开自己，导致overflow: hidden形同虚设，text-overflow: ellipsis自然没机会渲染。
必须在网格直接子元素上加min-width: 0，这是开关，不是可选项。只加white-space: nowrap、overflow: hidden、text-overflow: ellipsis三件套，不加它，99%情况都白搭。
-
min-width: 0必须作用于.grid-item自身，不是.grid-container - 若子项内部还嵌套了
display: flex的容器，那个内部容器也得单独加min-width: 0 - 用开发者工具检查Computed面板，确认
min-width真实值是否已变成0px，别被其他规则覆盖
为什么只写overflow: hidden完全无效
很多人以为“隐藏溢出”就是把内容裁掉，但Grid子项在min-width: auto保护下，根本不会溢出——它先一步把自身宽度拉到文字长度，容器被顶宽了，overflow: hidden连生效条件都没满足。
你看到的是文字把盒子撑变形了，不是文字被藏起来了。这时候加overflow: hidden只是个摆设，和没写一样。
- 仅设
overflow: hidden或仅在容器上设min-width: 0，都无效 -
word-break: break-all同样依赖min-width: 0才能真正约束宽度；不加它，在1fr列里也可能失效 - Safari对
break-all在Grid中的支持曾有bug，iOS 15+建议实测
text-overflow: ellipsis生效的三个硬性条件
三者缺一不可，且必须同时作用于同一个块级文本容器上：
-
min-width: 0（解除收缩锁） -
white-space: nowrap（禁止换行） -
overflow: hidden+text-overflow: ellipsis（触发截断与渲染）
另外，该元素还得有明确宽度约束——来自父容器的grid-template-columns、自身max-width，或flex-basis（如果子项是flex容器）。没有宽度锚点，省略号永远不会出现。
示例正确写法：
.grid-item {<br> min-width: 0;<br> white-space: nowrap;<br> overflow: hidden;<br> text-overflow: ellipsis;<br>}
容易被忽略的兼容场景：嵌套Flex、响应式、替换元素
实际项目里，失效往往不出在基础写法，而出在这些边缘点：
- 子项是
这类替换元素？它们不响应min-width: 0，需额外加max-width: 100%防撑破 - 子项内用了
display: inline-flex或display: table？这些显示类型自带最小宽度逻辑，优先级高于min-width: 0 - 父容器没设
width或max-width？Grid容器自身无限宽，子项再怎么缩也没意义 - React/Vue中用动态类名控制截断？很容易只把三件套放进
.truncate类，却漏了min-width: 0，结果class加了，效果没有
真正难的不是记住min-width: 0，而是每次遇到失效，都要顺藤摸瓜查一遍：父容器有没有宽度约束、子项是不是Grid直接子、min-width有没有被覆盖、三件套有没有写全、嵌套结构里有没有漏掉第二层min-width: 0。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
