1fr列被长文本撑开是因子项默认min-width: auto，需显式设min-width: 0或用minmax(0, 1fr)；text-overflow: ellipsis生效须同时满足min-width: 0、white-space: nowrap、overflow: hidden和max-width: 100%。
为什么1fr列会被长文本撑开
根本不是1fr失效，而是 Grid 子项默认min-width: auto——浏览器会按内容的min-content（最小固有宽度）来分配轨道。遇到无空格的长 URL、base64 字符串或连续英文单词时，这个值可能极大；加上white-space: nowrap后，内容完全不可折行，列就只能被硬拉宽。
你在 DevTools 的 Styles 面板看到grid-template-columns: 1fr 1fr，但切到 Computed 面板，会发现某列min-width仍是auto，且实际宽度远超预期。这不是 bug，是规范行为。
必须在 grid 直接子元素上设 min-width: 0
仅加overflow: hidden没用，它只裁剪视觉，不改变尺寸计算逻辑。真正起效的是显式覆盖默认约束：
-
min-width: 0必须写在.grid > .item上，不能只写.item（避免污染非 Grid 上下文） - 如果子项内部用了
display: flex，它的直接子元素也得加min-width: 0，否则撑开会逐层传导 - 图片、
<iframe></iframe>等替换元素需额外加max-width: 100%和height: auto
minmax(0, 1fr)比纯1fr更可靠
在grid-template-columns里直接改轨道定义，是从源头切断撑开可能：
-
1fr实际等价于minmax(min-content, 1fr)，而minmax(0, 1fr)把下限设为0，允许轨道压缩到极致 - 三列等分应写
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) - 慎用
minmax(0, 1fr)混搭auto或固定值，否则auto列仍会抢走最小宽度
text-overflow: ellipsis生效的四个硬条件
它不是“加了就起作用”的装饰属性，漏掉任意一项都白搭：
-
min-width: 0（必须作用于.grid > .item自身） -
white-space: nowrap（禁止换行） -
overflow: hidden（提供裁剪上下文） -
max-width: 100%或具体width（不能是auto）
最常被忽略的是第一项：写在容器上、或用泛类.item匹配但未限定层级，text-overflow就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
