截断Twitter Bootstrap轮播的文本

Question

我想截断Bootstrap轮播.carousel-caption元素的文本。我正在使用shave.js来截断文本。但是，截断仅适用于第一个.carousel-caption元素。

我创建了一个jsfiddle来演示我的问题：jsfiddle

当我从轮播中删除CSS类carousel-inner时，截断功能完全适用于展位.carousel-caption元素。

Answer 1

我不太确定这个问题，但我认为这是由于旋转木马的动态行为所以剃须代码只适用于第一个标题，因为它是可见的并且它的高度设置因此，您的代码也应该是动态的，以便为每张幻灯片调用shave funcion。

一个想法是使用轮播组件提供的事件并在那里调用剃须函数。

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

  

slid.bs.carousel ：当轮播完成时会触发此事件   它的幻灯片过渡。 ^ref

完整代码：https://jsfiddle.net/dpnpo4o7/2/

我在上面的代码中使用了插件的jQuery版本，但它与JS版本的工作方式相同：

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

完整代码：https://jsfiddle.net/dpnpo4o7/3/

Answer 2

我经历了小提琴。剃须必须找到那些第二个字幕，但由于它在那一刻是不可见的，所以它没有做到这一点。

解决方案：您可能希望捕获上一个和下一个事件，然后尝试使用您的代码。