text-overflow: ellipsis在grid子项中不生效的根本原因是min-width: auto阻止截断，必须显式设置min-width: 0才能触发省略号；还需white-space: nowrap、overflow: hidden三者共存且作用于同一文本容器，并有明确宽度约束。
text-overflow: ellipsis在Grid子项里不显示省略号
根本不是样式写错了，而是浏览器压根没触发截断逻辑——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>}
容易被忽略的嵌套与兼容场景
实际项目里，失效往往不出在基础写法，而出在这些边缘点：
- 子项内部嵌套了
display: flex容器，但没给那个内部容器加min-width: 0 - 用了
grid-template-columns: repeat(3, 1fr)，但没配minmax(0, 1fr)，长文本仍会撑破轨道 - 框架组件（如Ant Design的
Card）自带样式可能覆盖min-width: 0，需检查Computed值是否真为0px - 浏览器缓存旧样式，或开发工具里
Computed栏未刷新，误判已生效
真正复杂的地方在于：这个限制不是“Grid专属”，而是所有弹性布局（flex/grid）子项的共性行为。一旦嵌套层级变深、或混用flex与grid，min-width: 0就得逐层手动加，漏一层就前功尽弃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
