CSS如何实现主文本行数变化时分割线与副文本位置保持固定

核心原因 #

你现在的布局中，每个卡片的高度由内部内容自动撑开，主文本1行和2行的高度差会直接导致下方的分割线、副文本位置上下偏移，只要让所有卡片的主文本区域高度统一，或者把下方区域固定在卡片底部即可解决。

方案1：固定主文本区域高度（实现最简单） #

给主文本的包裹元素设置刚好容纳2行内容的固定高度，不管实际内容是1行还是2行，占用高度完全一致：

.main-text {
  /* 数值可根据你的字号、行高调整，比如14px字号、1.2行高的场景，2行总高度为14*1.2*2=33.6px，留一点冗余设34px即可 */
  height: 34px;
  line-height: 1.2;
  /* 可选配置：超过2行的内容自动加省略号截断，避免内容溢出 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

方案2：Flex布局固定底部区域（适配性更强） #

如果后续可能调整主文本最大行数，推荐用Flex垂直布局把分割线、副文本区域固定在卡片底部，不用频繁调整固定高度：

/* 单个卡片的外层容器 */
.card-item {
  display: flex;
  flex-direction: column;
  /* 最小高度按内容最多的卡片总高度设置即可 */
  min-height: 120px;
}

/* 分割线+副文本的容器div2 */
.div2 {
  margin-top: auto;
}

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