grid子项text-overflow: ellipsis不显示的根本原因是默认min-width: auto阻止截断，必须在.grid-item自身显式设置min-width: 0，并配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis及明确宽度约束（如max-width或minmax(0, 1fr)）四者缺一不可。
Grid子项text-overflow: ellipsis不显示，缺了min-width: 0
不是CSS写错了，而是浏览器压根没触发截断逻辑——Grid子项默认min-width: auto，会死守“至少容纳整段文字”的底线。哪怕父容器只有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，别被其他规则覆盖
Grid轨道尺寸没给约束，text-overflow根本无从触发
text-overflow: ellipsis需要明确宽度锚点才能判断“哪里算溢出”。Grid中这个锚点不能靠“剩余空间”糊弄，必须来自显式定义的轨道尺寸或子项自身的max-width。
常见错误是只写grid-template-columns: 1fr——它实际等价于minmax(auto, 1fr)，仍受min-content限制。长URL或连续无空格字符串会直接顶破列宽。
- 改用
grid-template-columns: minmax(0, 1fr)，显式允许轨道缩到0 - 或给子项加
max-width: 100%，配合min-width: 0形成有效约束 - 避免
grid-template-columns: fit-content(200px)这类写法，它可能让轨道随内容膨胀，破坏截断前提
嵌套Flex再套Grid时，min-width: 0要加三层
Grid子项 → 内部Flex容器 → 最终文本块：这三层只要有一层漏掉min-width: 0，截断就中断。尤其容易忽略的是中间那层Flex容器——它自己也是Flex上下文，默认min-width: auto，会把撑开行为传导下去。
典型失效链：.grid-item（已加min-width: 0）→ .flex-wrapper（display: flex，但没加min-width: 0）→ .text（写了text-overflow: ellipsis但无效）。
- 每一层Flex容器都要单独加
min-width: 0，不能靠继承 -
.text还需是块级元素（display: block或inline-block），span默认不行 - 如果
.text还设了flex-shrink: 0，会直接覆盖min-width: 0效果，删掉或改成flex-shrink: 1
多行省略号在Grid里根本不能用text-overflow
text-overflow: ellipsis只对单行生效。Grid子项想实现三行截断，-webkit-line-clamp是当前唯一可行的CSS方案，但它有硬伤：
- 必须配
display: -webkit-box和-webkit-box-orient: vertical，且overflow: hidden仍需保留 - Firefox完全不支持；Safari直到17+才稳定支持；Chrome虽支持但对Grid嵌套场景兼容性波动大
- 更稳的替代是JS动态截断 +
title属性提示完整文本，或服务端预处理
真正容易被忽略的，不是“怎么写省略号”，而是“谁在偷偷撑宽盒子”——比如父Grid用了align-items: stretch又没设min-height，或者子项里混用了float或position: absolute，这些都会绕过min-width: 0的控制，让整个截断链失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
