grid-template-rows: min-content 不适用于文本截断，因其仅收缩行高而不触发 text-overflow: ellipsis 或限制行数；正确方案是 Grid 提供布局上下文，由子项（如 p）通过 -webkit-line-clamp 实现多行截断，并配合 overflow: hidden 和 display: -webkit-box。
不能直接用 grid-template-rows: min-content 实现“带省略号的多行截断”——它只管行高收缩，不管文本溢出和 ellipsis。 真正可行的方案是：把截断逻辑交给子容器（如 p 或 div），Grid 只负责提供自适应布局上下文。
为什么 grid-template-rows: min-content 不适用于文本截断
min-content 的作用对象是「网格行轨道」，不是「文本内容」。它会让该行高度收缩到子项中「最窄内容能撑开的最小高度」，比如单行文字或图片固有高度。但：
- 它不触发
text-overflow: ellipsis，也不限制行数 - 若子项用了
display: flex或设置了overflow: hidden，min-content可能被忽略或退化为0 - Firefox 对嵌套 flex 容器里的
min-content解析更保守，容易失效 - 即使写成
grid-template-rows: minmax(min-content, 3em)，也只是设了最大高度，没解决省略号渲染问题
正确做法：Grid 布局 + 子项内用 -webkit-line-clamp
Grid 负责让卡片/列表项高度随内容自然伸缩，截断由子文本容器自己完成。这是目前兼容性最好、语义最清晰的组合：
- 父容器设
display: grid，用grid-template-rows: auto或minmax(min-content, auto)保证高度不塌缩 - 文本容器（如
p）单独加.clamp-2类，内部用display: -webkit-box+-webkit-line-clamp - 必须配
overflow: hidden和text-overflow: ellipsis（后者在多行下仅部分浏览器渲染省略号，但不影响截断） - 避免在文本容器上设固定
height或max-height，否则会和-webkit-line-clamp冲突
.card-grid { display: grid; grid-template-rows: minmax(min-content, auto); gap: 1rem; }
.card { padding: 1rem; border: 1px solid #ccc; }
.clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin: 0;
}遇到截断不生效？优先检查这三处
常见失效不是 Grid 问题，而是子项样式冲突：
立即学习“前端免费学习笔记（深入）”；
-
white-space: nowrap出现在文本容器或其祖先上 —— 这会禁用换行，-webkit-line-clamp失效 - 文本容器设了
flex: 1或height: 100%，且父级 Grid 行未定义明确尺寸 —— 造成循环依赖，高度无法计算 - 外部框架（如 Ant Design、Element Plus）给容器加了
contain: layout或will-change: transform—— 渲染隔离导致-webkit-line-clamp不触发重排
Firefox 兼容性补救与降级策略
Firefox 71+ 支持 -webkit-line-clamp，但需手动开启 layout.css.line-clamp.enabled（默认已启用）。稳妥起见仍建议加 @supports 降级：
- 用
@supports not (display: -webkit-box)检测不支持环境 - 降级时设
max-height: calc(1.5em * 2)+overflow: hidden，虽无省略号但能强制截断 - 避免用
line-clamp的 polyfill 或 JS 计算——破坏 CSS 自适应初衷
真正难处理的不是技术组合，而是当 Grid 容器被套在 contain: strict 或 transform 层级里时，-webkit-line-clamp 会静默失效，此时只能剥离该容器或改用 Flex 截断方案。
