text-overflow: ellipsis在Grid子项中失效，根本原因是子项默认min-width: auto阻止收缩，必须同时设置min-width: 0、white-space: nowrap、overflow: hidden和明确宽度约束（如minmax(0, 1fr)或max-width）四者缺一不可，且须作用于同一文本容器。
为什么 text-overflow: ellipsis 在 Grid 子项里完全没反应
不是样式写错了，是浏览器压根没触发截断逻辑。Grid 子项默认 min-width: auto（表现接近 min-content），会强行撑开自己去容纳整段文字——哪怕父容器只有 100px 宽，它也优先把盒子顶宽，导致 overflow: hidden 形同虚设，text-overflow: ellipsis 自然不会渲染。
Grid 中单行省略必须加的硬性条件
四个条件缺一不可，且必须同时作用于同一个文本容器元素上：
-
min-width: 0—— 解除 Grid 子项的“收缩锁”，这是开关，不是可选项 -
white-space: nowrap—— 禁止换行，否则根本不会水平溢出 -
overflow: hidden—— 创建裁剪边界，没有它，ellipsis 就没作用对象 - 明确宽度约束 —— 来自
grid-template-columns（如1fr或minmax(0, 1fr)）、max-width，或显式width
常见错误：只在 .grid-container 上设 min-width: 0，但真正要加的是直接子元素（即 .grid-item）；若子项内部还有 display: flex 的包装层，那个内层也得单独加 min-width: 0。
Grid 列宽用 1fr 时为什么还是失效
1fr 本身不等于“有宽度约束”，它只是分配剩余空间，而 Grid 子项在 min-width: auto 下仍会按内容撑开。必须配合 minmax(0, 1fr) 或显式 width: 0 才能生效。
- 推荐列定义：
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) - 或在子项上补：
width: 0; min-width: 0;（width: 0是为了配合min-width: 0触发收缩） - 用开发者工具检查
Computed面板，确认min-width真实值是否为0px，别被其他规则覆盖
嵌套 Flex 容器、响应式、替换元素这些边缘场景
实际项目里，失效往往不出在基础写法，而出在这些地方：
- 子项内部是
display: flex的 wrapper？那个 wrapper 也得加min-width: 0 - 用了
img或svg等替换元素？它们自带固有尺寸，可能干扰宽度计算，建议加max-width: 100%和height: auto - 响应式中用
max-width替代width更安全，但要注意父容器是否被fit-content或inline-size: max-content拉宽 - Safari 对
word-break: break-all在 Grid 中的支持曾有 bug，iOS 15+ 建议实测
真正容易被忽略的，从来不是“怎么写省略号”，而是“谁在控制宽度”——Flex grow、Grid track sizing、min-width 继承链、甚至 contain: layout 都可能悄悄破坏那个关键的宽度锚点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
