javascript - Updating button text with sliding text from top -

i trying update button text on click sliding new text top. "pushes" text , appear.

i've managed that, when background darker, can see text appearing outside button. how solve ? , can't lower top value since otherwise text still visible when removed dom. here code:

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

css :

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

jsfiddle here

is there way cut text when bigger container ? so:

use overflow: hidden on tag. http://jsfiddle.net/qg4cx/12/

a {  overflow: hidden; }