标题三十二个字 卡片被撑高半屏 两列参差不齐

一篇活动通知的标题有三十二个字，列表里那张卡片比旁边高出一大截，同一行两张卡片的按钮位置差了将近五十像素，网格看着是歪的。第一次遇到会往复杂处想，其实漏掉的多是个小前提。

.card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

标题没有限制行数，长标题自己换行到四行，把卡片撑高。网格按最高那张对齐，整行都被拉长，其他卡片底部留出空白。这一点先确认清楚，后面就不用反复试。

「长标题撑高卡片」这类改动最怕改一半，回滚脚本先准备好，再动生产。把这次用到的命令存进笔记，比记住结论有用，换个环境还能照着走。

改完隔一天再看一次，当场正常不代表能稳住。

具体做法是，标题限制两行，超出用省略号，-webkit-line-clamp 加 overflow: hidden；标题块给一个固定最小高度，两行的高度先占住，短标题也整齐；悬停时用 title 属性或浮层显示完整标题，别让用户只能看到半句。

改完照着核一遍，最长的标题也只占两行，同一行卡片的按钮底部对齐，网格不再出现空档。