text-overflow: ellipsis 在 Grid 子项中不生效的根本原因是子项默认 min-width: auto，必须显式设置 min-width: 0 才能触发截断；还需配合 white-space: nowrap、overflow: hidden，并在 Safari 中加 !important 确保生效。
text-overflow: ellipsis 在 Grid 子项中不生效，缺了 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 容器本身 - 若子项内部还嵌套了
display: flex或display: grid，那个内部容器也得单独加min-width: 0 - 用开发者工具检查 Computed 面板，确认
min-width真实值是否已变成0px，别被其他规则覆盖
为什么只给 Grid 容器加 overflow: hidden 完全无效
因为 Grid 容器默认不创建 BFC，且子项自带 min-width: auto，浏览器会优先撑开轨道，而不是裁剪内容。你看到文字从右侧“漏出来”，不是样式没写，是裁剪根本没触发。
真正起效的组合是：grid-template-columns: minmax(0, 1fr) + 子项 min-width: 0 + 子项自身 overflow: hidden。漏掉任一，溢出照常发生。
立即学习“前端免费学习笔记（深入）”；
-
grid-template-columns: 1fr实际等价于minmax(auto, 1fr)，长 URL 照样撑开 -
grid-template-columns: minmax(0, 1fr)才显式允许轨道缩到 0，是前提 - 给
.grid容器加min-width: 0→ 完全无效，必须作用于直接子元素
中文/无空格字符串下失效，不只是 Grid 的锅
中文、日文或长哈希串这类无空格文本，在 Grid + text-overflow 组合里更容易暴露问题：浏览器认为“整段就是一个词”，不会主动折行或裁切。这不是 Grid 特有问题，但默认 min-width: auto 让它更难被约束。
- 仅靠
min-width: 0+text-overflow: ellipsis不够，需补word-break: break-all或overflow-wrap: break-word -
word-break: break-all在 iOS 15+ 前 Safari 有 bug，建议实测；overflow-wrap: break-word更稳妥 - 若子项含图片或
<pre>，还得额外加max-width: 100%或overflow-x: auto，否则min-width: 0也救不了
Safari 中 min-width: 0 不生效，得加 !important
Safari（尤其 iOS 15 及更早）对 min-width: 0 在 Grid/Flex 子项中的解析存在延迟或忽略，尤其当子项嵌套了 display: flex 或 inline 元素时，仍按 min-content 计算宽度。
- 显式加
min-width: 0 !important强制覆盖 Safari 默认行为 - 避免仅靠
white-space: nowrap—— 必须同时配overflow: hidden和text-overflow: ellipsis，三者同级生效 - Vue 的
:deep()在 Safari 下对 scoped 样式 + 伪类组合解析不稳定，改用全局类或data-v-属性手动匹配
min-width: 0。 
