CSS Grid 容器内文字溢出未省略，通常是因为网格项（grid item）的宽度被内容撑开，导致无法正确应用文本省略（text-overflow: ellipsis）。默认情况下，Grid 项目会根据内容自动调整大小，这可能会影响文本溢出效果。原因分析内容撑宽：如果网格项中的文字过长，容器会自动扩展以适应内容，从而导致文本溢出未被截断。文本溢出设置无效：如果没有正确设置 white-space

CSS Grid 中 text-overflow: ellipsis 不生效的根本原因并非样式遗漏，而是网格子项默认的 min-width: auto 强制撑宽以容纳全部文本，导致 overflow: hidden 失去作用前提；必须显式设置 min-width: 0（作为“收缩开关”），再配合 white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis 三者共存于同一有明确宽度约束的文本容器上，缺一不可——尤其在嵌套 flex/Grid 或使用框架组件时，还需逐层检查并为内部弹性容器手动添加 min-width: 0，否则省略号永远无法渲染。

text-overflow: ellipsis在Grid子项里不显示省略号

根本不是样式写错了，而是浏览器压根没触发截断逻辑——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-container
• 若子项内部还嵌套了display: flex的容器，那个内部容器也得单独加min-width: 0
• 用开发者工具检查Computed面板，确认min-width真实值是否已变成0px，别被其他规则覆盖

为什么只写overflow: hidden完全无效

很多人以为“隐藏溢出”就是把内容裁掉，但grid子项在min-width: auto保护下，根本不会溢出——它先一步把自身宽度拉到文字长度，容器被顶宽了，overflow: hidden连生效条件都没满足。

你看到的是文字把盒子撑变形了，不是文字被藏起来了。这时候加overflow: hidden只是个摆设，和没写一样。

• 仅设overflow: hidden或仅在容器上设min-width: 0，都无效
• word-break: break-all同样依赖min-width: 0才能真正约束宽度；不加它，在1fr列里也可能失效
• Safari对break-all在grid中的支持曾有bug，iOS 15+建议实测

text-overflow: ellipsis生效的三个硬性条件

三者缺一不可，且必须同时作用于同一个块级文本容器上：

• min-width: 0（解除收缩锁）
• white-space: nowrap（禁止换行）
• overflow: hidden + text-overflow: ellipsis（触发截断与渲染）

另外，该元素还得有明确宽度约束——来自父容器的grid-template-columns、自身max-width，或flex-basis（如果子项是flex容器）。没有宽度锚点，省略号永远不会出现。

示例正确写法：

.grid-item {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

容易被忽略的嵌套与兼容场景

实际项目里，失效往往不出在基础写法，而出在这些边缘点：

• 子项内部嵌套了display: flex容器，但没给那个内部容器加min-width: 0
• 用了grid-template-columns: repeat(3, 1fr)，但没配minmax(0, 1fr)，长文本仍会撑破轨道
• 框架组件（如Ant Design的Card）自带样式可能覆盖min-width: 0，需检查Computed值是否真为0px
• 浏览器缓存旧样式，或开发工具里Computed栏未刷新，误判已生效

真正复杂的地方在于：这个限制不是“Grid专属”，而是所有弹性布局（flex/grid）子项的共性行为。一旦嵌套层级变深、或混用flex与grid，min-width: 0就得逐层手动加，漏一层就前功尽弃。

今天关于《CSS Grid 容器内文字溢出未省略，通常是因为网格项（grid item）的宽度被内容撑开，导致无法正确应用文本省略（text-overflow: ellipsis）。默认情况下，Grid 项目会根据内容自动调整大小，这可能会影响文本溢出效果。原因分析内容撑宽：如果网格项中的文字过长，容器会自动扩展以适应内容，从而导致文本溢出未被截断。文本溢出设置无效：如果没有正确设置 white-space: nowrap 和 overflow: hidden，文本溢出设置将不起作用。解决方案要让文本在网格项中正确显示省略号，可以按照以下步骤操作：1. 设置 min-width: 0.grid-item { min-width: 0; }这个属性可以让网格项不再受内容宽度的影响，从而允许其根据容器的大小进行收缩。2. 应用文本溢出样式.grid-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }这些样式确保了当文本超出容器时，会显示省略号。示例代码