截断Twitter Bootstrap轮播的文本

Question

I want to truncate the text of the Bootstrap carousel .carousel-caption element. I am using shave.js to truncate the text. However, the truncating only works on the first .carousel-caption element.

I`ve created a jsfiddle to demonstrate my problem: jsfiddle

When I remove the CSS class carousel-inner from the carousel, the truncating works perfectly on booth .carousel-caption elements.

Answer 1

I am not pretty sure about the issue, but I think it's due to the dynamic behavior of the carousel so the shave code will only work on the first caption because it's visible and its height is set so your code should also be dynamic to call the shave funcion for each slide.

An idea is to use the event provided by the carousel component and call the shave function there.

$('#carousel-example-generic').on('slid.bs.carousel', function () {
  $(".carousel-caption").shave(70);
})

slid.bs.carousel : This event is fired when the carousel has completed its slide transition. ^ref

Full code : https://jsfiddle.net/dpnpo4o7/2/

---

I used the jQuery version of the plugin in the code above but it works the same with the JS version:

$('#carousel-example-generic').on('slid.bs.carousel', function () {
  shave(".carousel-caption", 70);
})

Full code : https://jsfiddle.net/dpnpo4o7/3/

Answer 2

I went through the fiddle. And shave must be finding those second captions but since it is invisible at that moment, it is failing to do that.

Solution: You might want to capture the prev and next events and then try your code.