将溢出文本滚动到视图中

Question

我需要将一些溢出的文本滚动到视图中.

我试图为其文本缩进设置动画,但我需要为正确的像素量设置动画.我该如何计算？

请参阅:http://jsfiddle.net/wqRcK/5/

我只需要将文本滚动到视图中,而不是像我尝试的那样滚动"总宽度".

作为一个附带问题,我如何span.title尊重10像素填充？

Answer 1

将您设置span为inline-block,
并将其设置为"-" + ( $(this).width() - $(this).parent().width() ) + "px":

div.box span.title { white-space: nowrap; display: inline-block; }

$(document).ready(function() {
    var boxwidth = $("div.box").width();
    $("span.title").hover(
      function () {
        $(this).stop().animate({
            textIndent: "-" + ( $(this).width() - $(this).parent().width() ) + "px"  
        }, 1000);  
      }, 
      function () {
        $(this).stop().animate({
            textIndent: "0"           
        }, 1000);  
      }
    );
});

这是你的小提琴:http://jsfiddle.net/wqRcK/20/

PS请记住始终缓存选择器.