如何在CSS Grid中实现多行文本完整字符截断？

嘿，我太懂你在CSS Grid里遇到的这个多行文本截断糟心事了——半行文字悬在那儿，还随屏幕尺寸乱变，真的很影响页面整洁度！别慌，我给你几个专门适配Grid布局的解决方案，保证只显示完整的字符：

其实line-clamp不止能用于单行，多行也完全没问题，但在Grid布局里你得注意给Grid项明确的高度限制，不然Grid会自动拉伸容器，导致截断失效。

直接上代码示例，假设你要显示3行文本：

/* Grid容器样式 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

/* Grid项的文本截断核心样式 */
.grid-item {
  /* 关键：设置最大高度，按行高×行数计算（比如行高1.2，3行就是3.6em） */
  max-height: 3.6em;
  overflow: hidden;
  /* 以下是-webkit前缀的多行截断属性 */
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 要显示的行数 */
  -webkit-box-orient: vertical;
  /* 统一行高，确保不同屏幕下高度计算准确 */
  line-height: 1.2;
  /* 可选：给文本加个内边距，避免截断的文字贴边 */
  padding: 0.5rem;
}

为什么之前会出现半行？因为Grid默认会根据内容自动调整项的高度，没有max-height约束的话，line-clamp没法精准控制截断位置，就容易出现半行漏出来的情况。固定行高也很重要，不然不同屏幕下的行高变化会打乱高度计算。

如果某些浏览器（比如旧版Firefox）对line-clamp支持不够友好，或者极端场景下还是有半行露出，可以加个渐变遮罩层，把可能的半行文字盖住：

.grid-item {
  position: relative;
  max-height: 3.6em;
  overflow: hidden;
  line-height: 1.2;
  padding-bottom: 1.2em; /* 给伪元素留够空间 */
}

.grid-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.2em; /* 和行高保持一致 */
  /* 渐变背景要和容器的背景色匹配，这里假设是白色 */
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}

这个方案可以和line-clamp一起用，双重保险，确保页面视觉效果统一。

如果你的项目需要兼容非常旧的浏览器（不支持line-clamp），可以用JS动态计算文本高度，手动截断多余内容：

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  const truncateText = (element, maxLines) => {
    const lineHeight = parseFloat(getComputedStyle(element).lineHeight);
    const maxHeight = lineHeight * maxLines;
    
    // 不断截断文本，直到高度符合要求
    while (element.scrollHeight > maxHeight) {
      element.textContent = element.textContent.slice(0, -1);
    }
    // 如果确实截断了，加上省略号
    if (element.scrollHeight >= maxHeight) {
      element.textContent += '...';
    }
  };

  // 给所有需要截断的Grid项应用
  document.querySelectorAll('.grid-item').forEach(item => {
    truncateText(item, 3); // 这里的3是要显示的行数
  });
});

注意这个方案需要在内容加载完成后执行，如果是动态加载的内容，要记得重新调用这个函数。

总结一下：优先用CSS的line-clamp方案，配合Grid项的max-height和固定行高，这是最简洁高效的；如果有兼容性顾虑，加上渐变伪元素兜底；极端兼容场景再用JS辅助。

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