如何让flex容器仅显示指定N行内容且无需设置固定高度？

针对你当前横向排列、自动换行的flex容器，在不设置固定高度、适配子项高度不一致的前提下，有两类可行方案：

纯CSS方案（适配子项宽度统一的规则布局） #

不需要JS介入，通过负边距+伪元素占位实现截断，适合卡片流、商品网格这类子项宽度统一的场景：

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow: hidden;
  /* 自定义要显示的行数，示例为3行 */
  --visible-lines: 3;
}

.container > * {
  /* 用足够大的负下边距把超出N行的内容移出可视区域 */
  margin-bottom: calc(-100% - 1px);
}

.container::after {
  content: "";
  flex-basis: 100%;
  height: 0;
  order: 999;
}

注意：该方案在子项宽度差异大、换行位置不规则的场景下可能出现截断偏差，不适合复杂错落布局。

JS动态计算方案（适配任意布局，截断精准） #

如果子项宽高都不固定、需要完全精准的截断效果，最稳妥的方式是通过JS动态计算前N行的实际总高度，给容器设置动态max-height，不需要写死固定值，完全适配行高不一致的场景：

// 配置需要显示的行数
const VISIBLE_LINE_COUNT = 3;
const container = document.querySelector(".container");

function setContainerMaxHeight() {
  // 临时取消高度限制，获取子项真实位置
  container.style.maxHeight = "none";
  const items = Array.from(container.children);
  if (!items.length) return;

  let currentLineTop = items[0].offsetTop;
  let lineCount = 1;
  let maxContainerHeight = 0;

  for (const item of items) {
    // 子项offsetTop变大说明进入新行
    if (item.offsetTop > currentLineTop) {
      lineCount++;
      currentLineTop = item.offsetTop;
    }
    // 遍历到第N+1行时停止计算
    if (lineCount > VISIBLE_LINE_COUNT) break;
    // 记录当前行的最大底部坐标，作为容器高度
    const itemBottom = item.offsetTop + item.offsetHeight;
    maxContainerHeight = Math.max(maxContainerHeight, itemBottom);
  }

  container.style.maxHeight = `${maxContainerHeight}px`;
  container.style.overflow = "hidden";
}

// 初始化执行
setContainerMaxHeight();
// 窗口尺寸变化时重新计算，适配响应式布局
window.addEventListener("resize", setContainerMaxHeight);

该方案会自动识别每个子项的真实位置和高度，不管子项高度差多大、换行位置如何变化，都能刚好截断在第N行底部，不会出现半行被裁切的问题。

避坑提示 #

不要直接给flex容器套用-webkit-line-clamp做多行截断，这个属性原生是为文本截断设计的，作用在包含块级子项的flex换行容器上会出现布局错乱、截断位置异常的问题。

内容的提问来源于stack exchange，提问作者Nathan