将溢出文本滚动到视图中

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/

---

P.S。请记住始终缓存您的选择器。

Answer 2

要完成约瑟夫的回答，我为你的旁边问题添加了填充，使标题为symetric =＆gt; http://jsfiddle.net/wqRcK/45/

艾默里克。