jquery dotdotdot plugin (adds ellipsis) not working with Bootstrap carousel

Question

I'm using the Bootstrap 3 carousel for my Rails 4 application. To truncate longer captions in the carousel, I'm using the jquery dotdotdot plugin which also appends "..." at the end. While the plugin works for the first image in the carousel, it doesn't work for subsequent images.

Here's the jsfiddle: http://jsfiddle.net/michaelvli/GD3JH/9/

Why is dotdotdot not executing on all captions of the carousel? I've tried using a carousel event handler to execute the plugin every time the carousel slides but this solution isn't suitable as the user will see the full caption for a brief moment before dotdotdot has had a chance to execute:

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

Alternatively, if somebody can recommend another solution that truncates multi-line captions while appending a "..." to the end, that would be great too.

Answer 1

The problem is that since it is not showing all items it's not applying the ... at the end of each, the ones hidden are not activating. To solve this we have all items to be the class active item so they are shown then switch all but the first slide (or element 0) to item. To hide them again. So we can add this:

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

Now we have all the items affected properly by the dotdotdot.

Fiddle Here

Answer 2

you can actually add an auto ellipsis with css

css :

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

and here is your updated fiddle .. I have left your dotdotdot plugin there, but you really do not need it anymore

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

I have basically added the ellipsis class to your css and have added the ellipsis class to your

elements

<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

Added to Spencer Wieczorek's code

For multiple carousels on the same page, which adds an active class to all carousel item classes and removes all active class after the dotdotdot js except for each carousel's first item

$(".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/