动画切换文本时按文本高度裁剪超出内容的实现求助

Hey 👋，我仔细看了你的问题和需求，马上就找到问题所在啦！原来的布局定位和容器设置有漏洞，导致动画时文本跑出了预期范围，我给你调整了代码，完美实现你想要的裁剪效果👇

核心问题分析 #

你原来的代码里有两个关键问题：

• 切换的文本（.red/.blue）用了绝对定位，但没有被一个带固定高度的父容器约束，导致父元素的overflow: hidden根本管不住它
• 静态文本TEXT和切换文本TEST混在同一个容器里，定位逻辑混乱，动画时很容易超出范围

解决方案（修改后的完整代码） #

HTML（拆分布局，让静态/切换文本各司其职）

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="title">
  <span class="static-text">TEXT</span>
  <div class="switch-container">
    <span class="red">TEST</span>
    <span class="blue">TEST</span>
  </div>
</div>

CSS（重点优化定位和裁剪规则）

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #111;
  color: white;
  font-size: 48px;
  font-family: Arial, sans-serif;
}

.title {
  display: inline-flex; /* 让静态文本和切换容器并排显示 */
  align-items: flex-start;
}

.static-text {
  display: inline-block;
  margin-right: 8px; /* 可选：给TEXT和TEST之间加个小间距，更美观 */
}

.switch-container {
  position: relative;
  display: inline-block;
  height: 1.2em; /* 固定高度为一行文本的高度，适配字体大小 */
  overflow: hidden; /* 核心：裁剪超出容器的动画部分 */
  line-height: 1.2; /* 行高和高度匹配，确保文本垂直居中 */
}

.red,
.blue {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  transition: transform 1s ease, opacity 1s ease;
}

.red {
  color: red;
}

.blue {
  color: blue;
  transform: translateY(100%);
  opacity: 0;
}

JS（逻辑不变，仅适配新的选择器）

$(document).ready(function() {
  let currentAnimation = true;

  function animateText() {
    if (currentAnimation) {
      $(".red").css({
        transform: "translateY(-100%)",
        opacity: 0
      });
      $(".blue").css({
        transform: "translateY(0)",
        opacity: 1
      });
    } else {
      $(".red").css({
        transform: "translateY(0)",
        opacity: 1
      });
      $(".blue").css({
        transform: "translateY(100%)",
        opacity: 0
      });
    }
    currentAnimation = !currentAnimation;
    setTimeout(() => {
      requestAnimationFrame(animateText);
    }, 2000);
  }
  requestAnimationFrame(animateText);
});

为什么这样修改？ #

1. 拆分布局：把静态的TEXT和切换的TEST分开到不同容器，布局逻辑更清晰，能单独控制切换区域的裁剪规则
2. 固定切换容器高度：给.switch-container设置height: 1.2em（和行高匹配），确保容器高度刚好是一行文本的高度，动画时超出的部分会被overflow: hidden精准裁剪
3. 相对定位约束：.switch-container设置position: relative，让绝对定位的.red/.blue只能在它的范围内移动，彻底解决了之前文本跑出父容器的问题

这样修改后，动画效果就和你想要的完全一致啦——切换时TEST只会在自己的容器内上下移动，超出部分被裁剪，绝对不会跑到TEXT的上方～

备注：内容来源于stack exchange，提问作者Hector