如何用CSS实现Grid单元格文本自适应填充容器且不溢出？

针对你铺满屏幕的Grid布局中，label文本要自适应填充容器且不溢出的需求，我整理了几个比单纯公式计算更灵活可靠的方案，你可以根据场景选择：

方案一：纯CSS容器查询（推荐，无需JS） #

现在主流浏览器已经支持CSS容器查询了，这个方案能直接基于Grid单元格的实际尺寸动态调整字体大小，完美适配3x3、1x10这类不同行列数的布局：

首先给Grid单元格设置容器类型：

.grid-cell {
  /* 标记为尺寸容器，允许内部元素基于容器宽高查询 */
  container-type: size;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 可选：给单元格加一点内边距，避免文本贴边 */
  padding: 8px;
}

然后给label设置自适应字体：

label {
  /* clamp() 设置字体的最小、理想、最大值 */
  /* 80cqw/80cqh 表示取容器宽/高的80%（留边距防溢出），取两者较小值作为理想大小 */
  font-size: clamp(1rem, min(80cqw, 80cqh), 150pt);
  /* 保持文本一行居中，避免换行打乱布局 */
  white-space: nowrap;
  /* 极端情况防止溢出 */
  overflow: hidden;
  text-overflow: ellipsis;
}

这个方案的优势是完全用CSS实现，无需额外JS逻辑，自动响应窗口大小变化和Grid布局调整，代码简洁易维护。

方案二：JS动态计算（兼容性更强） #

如果需要兼容不支持容器查询的老浏览器，或者需要更精细的控制（比如根据文本长度动态调整），可以用JS实时计算单元格尺寸并设置字体大小：

function adjustLabelFontSize() {
  // 遍历所有Grid单元格内的label
  document.querySelectorAll('.grid-cell label').forEach(label => {
    const cell = label.parentElement;
    // 取单元格宽高的较小值，乘以0.8留边距（可根据需求调整比例）
    const maxFontSize = Math.min(cell.clientWidth, cell.clientHeight) * 0.8;
    // 设置字体大小，同时限制最大值不超过150pt（1pt≈1.333px）
    label.style.fontSize = `${Math.min(maxFontSize, 150 * 1.333)}px`;
  });
}

// 页面加载完成后初始化
window.addEventListener('load', adjustLabelFontSize);
// 窗口大小变化时重新计算
window.addEventListener('resize', adjustLabelFontSize);
// 如果Grid布局是动态生成的，还要在布局更新后调用adjustLabelFontSize()

这个方案的优势是兼容性拉满，能处理各种复杂场景，比如单元格尺寸动态变化、文本长度不一的情况，但需要额外维护JS逻辑。

补充细节 #

• 如果你的文本可能较长，建议去掉white-space: nowrap，换成word-break: break-word，确保文本在容器内换行且不溢出。
• 可以根据需求调整clamp()里的最小/最大值，或者JS中的比例系数，找到最适合的视觉效果。

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