单靠grid-template-columns无法自动截断，必须在文本容器上设置min-width: 0、overflow: hidden、text-overflow: ellipsis和white-space: nowrap四者缺一不可；因Grid子项默认min-width: auto会优先撑宽自身，导致溢出逻辑失效。
直接给结论：单靠 grid-template-columns 无法让内容自动截断，必须配合 min-width: 0 + overflow: hidden + text-overflow: ellipsis 这三件套，且要作用在文本容器上，不是 Grid 容器本身。
为什么 overflow-wrap: break-word 在 Grid 里经常失效
Grid 项默认有 min-width: auto，浏览器会按内容最小固有宽度（比如一个长 URL）来计算列宽下限，哪怕你写了 1fr，它也会撑开整列。此时 overflow-wrap: break-word 根本没机会触发——因为“溢出”还没发生，宽度已经被内容强行拉高了。
- 只设
overflow-wrap: break-word不够，必须显式打破min-width: auto行为 - 对整个 Grid 容器设
min-width: 0没用，得设在具体放文本的子元素上 - 如果子元素是
<div>包着<p>，那min-width: 0得加在<div>上，不是<p>
实现单行省略的标准写法（带 Grid 上下文）
适用于卡片标题、产品名等需固定一行、动态截断的场景。关键不是 Grid 怎么写，而是文本容器怎么封口：
- 文本容器（如卡片内的标题
<h3>或包裹层）必须设：min-width: 0、overflow: hidden、text-overflow: ellipsis、white-space: nowrap - Grid 容器本身只需正常写：
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))+gap: 12px - 别在文本容器上设
width: 100%—— Grid 已经保证它填满所在列，再设 width 可能引发双重计算
处理多行文本截断（非单行）
如果需求是“最多两行，超长显示省略号”，CSS 原生方案有限，但可落地：
立即学习“前端免费学习笔记（深入）”；
- 用
display: -webkit-box+-webkit-line-clamp: 2是目前最稳的方案（Chrome/Safari/Firefox 均支持，Edge 也早支持） - 必须搭配
-webkit-box-orient: vertical和overflow: hidden - 同样要前置
min-width: 0，否则多行截断在 Grid 下照样失效 - 不要用
line-clamp配flex容器——Flex 的min-width: auto行为更顽固，Grid 下反而更容易控制
真正容易被忽略的是：Grid 解决的是“列怎么分”，不是“内容怎么收”。所有截断逻辑都得压到子项内部去封口，而且 min-width: 0 是那个看不见但决定成败的开关——漏掉它，其他属性全白配。
