jquery - 将溢出文本滚动到 View 中

Question

我需要将一些溢出的文本滚动到 View 中。

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

参见:http://jsfiddle.net/wqRcK/5/

我只需要将文本滚动到 View 中，而不是像我尝试的那样滚动“总宽度”。

作为一个附带问题，如何使 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);  
      }
    );
});

这是你的 fiddle :http://jsfiddle.net/wqRcK/20/

<小时/>

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