如何让内容容器仅显示50%内容？倒计时上下Div视觉拼接实现

针对你的倒计时组件需求，要让.up和.down分别显示文本的上下50%，可以通过以下几种适配方案实现，配合你已有的.down的line-height: 0设置：

方法1：Overflow + 垂直位移（适配现有方案） #

给.up设置固定高度并开启溢出隐藏，通过位移让文本仅露出上半部分：

.up {
  /* 设置和.down一致的高度，保证上下块尺寸统一 */
  height: 24px; /* 替换成你实际的字体大小/组件高度 */
  overflow: hidden;
  /* 把文本向上偏移自身高度的50%，裁剪掉下半段 */
  transform: translateY(-50%);
}

.down {
  height: 24px; /* 和.up保持高度一致 */
  line-height: 0;
  overflow: hidden;
}

原理：.down的line-height: 0会让文本基线对齐容器底部，仅显示下半部分；.up通过位移上移文本，容器裁剪掉超出的下半段，刚好保留上半部分。

方法2：Clip-path 精准裁剪 #

用CSS裁剪属性直接保留元素的对应区域，无需依赖位移计算：

.up {
  clip-path: inset(0 0 50% 0); /* 裁剪底部50%，只留上半段文本 */
}

.down {
  line-height: 0;
  clip-path: inset(50% 0 0 0); /* 裁剪顶部50%，只留下半段文本 */
}

这种方式更直观，不需要额外设置高度，适合字体大小固定的场景。

方法3：绝对定位 + 区域划分 #

给父容器设置相对定位，让两个子元素分别占据上下半区：

/* 父容器 */
.countdown-wrap {
  position: relative;
  height: 48px; /* 整体高度为单个子元素的2倍 */
  overflow: hidden;
}

.up, .down {
  position: absolute;
  width: 100%;
  height: 50%;
}

.up {
  top: 0;
  /* 让文本对齐上半容器底部，仅显示上半段 */
  display: flex;
  align-items: flex-end;
}

.down {
  bottom: 0;
  line-height: 0; /* 保留你原有的设置 */
}

这种结构更清晰，方便给上下块单独添加边框、渐变等样式。

注意：无论用哪种方法，都要确保.up和.down的字体大小、字体系列完全一致，避免拼接后出现错位。

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