dotdotdot ellipsis not applied to flexslider captions

Question

I want to add ellipses to slide captions in a flexslider slideshow, using the dotdotdot jQuery library:

$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "fade"
  });
  $(".caption .title").dotdotdot();
  $(".caption .description").dotdotdot();
});

The ellipsis is added to only first slide:

http://jsbin.com/UbOmOxu/5

If I move the .flexslider() after the .dotdotdot() then not even the first slide gets the ellipsis.

http://jsbin.com/UbOmOxu/3

I've read other help questions on s.o. regarding dotdotdot claiming that absolutely positioned elements might have an effect, however, it's plainly clear that this is not the case, on version four of the above jsbin (sorry, don't have enough reputation points to post more than two links).

Does anyone know how I can get dotdotdot to process all the slide captions in this slideshow?

Answer 1

If you set the watch option to true it should work.

$(".caption .title").dotdotdot({ watch: true });
$(".caption .description").dotdotdot({ watch: true });

However, I've used it in the past, and in a big page with a considerable number of elements, so it was quite slow, affected scrolling and basic interaction with the page, especially IE8.

The problem is that it writes word by word into the DOM until it doesn't fit anymore words, rewriting so it writes maybe 5 words at a time or more (depending on the size of your container) should help with performance, don't have any tests, but it might not be very noticeable though.