jquery dotdotdot插件(添加省略号)不使用Bootstrap旋转木马

Question

我正在为我的Rails 4应用程序使用Bootstrap 3旋转木马。为了截断旋转木马中更长的标题，我使用了jquery dotdotdot插件，它还附加了“.”在最后。虽然该插件适用于旋转木马中的第一个图像，但它不适用于后续图像。

这是一个小摆设：http://jsfiddle.net/michaelvli/GD3JH/9/

为什么dotdotdot没有在旋转木马的所有标题上执行？我尝试过每次旋转木马滑动时使用旋转木马事件处理程序来执行插件，但是这个解决方案并不合适，因为在dotdotdot有机会执行之前，用户将在短时间内看到完整的标题：

$('.carousel').on('slide.bs.carousel', function () {
    $('.dotdotdot').dotdotdot({});
});

或者，如果有人可以推荐另一种解决方案，在附加“.”的同时截断多行标题到头来，那也太棒了。

Answer 1

问题是，由于它没有显示所有的项目，它没有在每个项目的末尾应用...，所以隐藏的项目没有被激活。为了解决这个问题，我们将所有项都作为类active item，然后显示它们，然后将除第一个幻灯片(或元素0)之外的所有项切换到item。再把他们藏起来。因此，我们可以补充如下：

$( ".active.item" ).each(function( index ) {
    if(index != 0){
        $(this).removeClass('active');
    }
});

现在，所有的项目都受到了点点的影响。

小提琴在这里

Answer 2

实际上，可以使用css添加一个自动省略号。

css：

.ellipsis {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;  
                -o-text-overflow: ellipsis;  
            }

这是你最新的小提琴。我把你的点点插件忘在那里了，但你真的不需要了。

http://jsfiddle.net/gsiry01/Ahhc6/1/

我基本上已经将省略类添加到您的css中，并将省略类添加到您的

元素

<p class='ellipsis'>BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH 1234 1234 1234 1234 1234 1234 1234 1234 </p>

Answer 3

添加到Spencer Wieczorek的代码中

对于同一页面上的多个旋转木马，它向所有旋转木马项类添加一个活动类，并删除dotdotdot之后的所有活动类，但每个旋转木马的第一项除外。

$(".item").each(function(){
   $(this).addClass('active');
})

$('.dotdotdot').dotdotdot({
    // configuration goes here
});
$(".carousel-inner").each(function(){
    $(this).find(".active.item").each(function( index ) {
        if(index != 0){
            $(this).removeClass('active');
        }
    });
});

http://jsfiddle.net/ardieziff/xj5jn7L5/