如何用CSS Grid实现高度自适应的文本截断效果_利用网格项容器配合clamp-css教程-PHP中文网

grid-template-rows: min-content 不适用于文本截断，因其仅收缩行高而不触发 text-overflow: ellipsis 或限制行数；正确方案是 grid 提供布局上下文，由子项（如 p）通过 -webkit-line-clamp 实现多行截断，并配合 overflow: hidden 和 display: -webkit-box。

如何用css grid实现高度自适应的文本截断效果_利用网格项容器配合clamp

不能直接用 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 负责让卡片/列表项高度随内容自然伸缩，截断由子文本容器自己完成。这是目前兼容性最好、语义最清晰的组合：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

父容器设 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 不触发重排