Javascript 使用顶部的滑动文本更新按钮文本

我试图通过从顶部滑动新文本，在单击时更新按钮文本。它“推送”文本并显示

我已经设法做到了，但是当背景较暗时，我们可以看到按钮外出现的文本。如何解决这个问题？我不能降低top值，因为如果不降低，文本从DOM中移除时仍然可见。这是我的密码：

var i = 1;
$('a').on('click', function (event) {
    var $el = $(this);
    $('span').animate({
        'top': '+=20px'
    }, 250, function () {
        $el.html('');
        i++;
        $el.prepend('<span class="b" >' + i + '</span>');
        $('.b').animate({
            'top': '+=20px'
        }, 250);
    });
});

---

当文本比容器大时，有没有办法剪切文本？ 像这样：

---

使用溢出：隐藏在a标记上。

---

当文本比容器大时，有没有办法剪切文本？这是另一个额外的问题吗？不，这是一个可能的解决方案。

span {
    position: relative;
}
.b {
    top: -20px;
} 

a {
 overflow: hidden;
}