1fr列被长文本撑开是因为其等价于minmax(min-content, 1fr)，而min-content在无空格长内容下极大；解决需同时设minmax(0, 1fr)与子项min-width: 0，并满足text-overflow: ellipsis四条件。
因为 Grid 子项默认 min-width: auto，浏览器会按内容最小固有宽度（min-content）分配轨道，而不是按你写的 1fr 或 200px 严格执行。这不是 bug，是 CSS 规范的默认行为。
为什么 1fr 列会被长文本撑开
1fr 实际等价于 minmax(min-content, 1fr)，其中 min-content 是关键：遇到无空格长 URL、base64 字符串或连续英文单词时，这个值可能极大。浏览器优先满足“不裁剪内容”，于是把整列拉宽，其他列被压缩甚至消失。
- DevTools 的 Styles 面板可能显示
grid-template-columns: 1fr 1fr，但切到 Computed 面板，你会发现某列的width远超预期，且min-width仍是auto - 仅改写
1fr为minmax(0, 1fr)能从轨道定义层切断撑开源头，但必须配合子项样式才真正生效 - 在
repeat(auto-fit, 1fr)场景下，漏掉minmax(0, 1fr)会导致小屏下网格项直接堆成一列
text-overflow: ellipsis 不生效的四个硬性条件
它不是“加了就起作用”的装饰属性，而是需要四者同时满足的计算触发机制：
-
min-width: 0（必须作用于.grid > .item，写在容器上或用泛类.item无效） -
white-space: nowrap（禁止换行，否则省略号无意义） -
overflow: hidden（提供裁剪上下文） -
width或max-width（不能是auto；若父容器宽度不确定，推荐max-width: 100%）
漏掉任意一项，尤其是第一项，text-overflow: ellipsis 就只是个摆设。
嵌套 display: flex 会让问题更隐蔽
Grid 子项内部如果用了 display: flex，它的直接子元素也会继承 min-width: auto —— 撑开行为会逐层传导，最终表现为整行被顶高、间隙异常、甚至横向滚动条意外出现。
- 必须分层处理：
.grid > .item加min-width: 0，其内部的flex容器也得加min-width: 0 - 图片、
<iframe></iframe>、<canvas></canvas>等替换元素同样受min-width: auto影响，需额外加max-width: 100%+height: auto - 移动端 X5 内核（微信）不支持
overflow-wrap: anywhere，别指望靠它替代break-all或break-word
最容易被忽略的是：这个限制不是 Grid 独有，所有弹性布局（display: grid / display: flex）子项都默认带 min-width: auto。只要子项含不可折行内容，又没显式重置这个值，撑开就是必然结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
