截斷Twitter Bootstrap輪播的文本

Question

我想截斷Bootstrap輪播.carousel-caption元素的文本。 我正在使用shave.js來截斷文本。 但是，截斷僅適用於第一個.carousel-caption元素。

我創建了一個jsfiddle來演示我的問題： jsfiddle

當我從旋轉carousel-inner移除CSS類carousel-inner ，截斷功能完全適用於booth .carousel-caption元素。

Answer 1

我不太確定這個問題，但我認為這是由於輪播的動態行為所以剃須代碼只能在第一個標題上工作，因為它是可見的並且它的高度已經設置好所以你的代碼也應該動態調用每張幻燈片的剃須函數。

一個想法是使用輪播組件提供的事件並在那里調用剃須函數。

$('#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

我經歷了小提琴。 剃須必須找到那些第二個字幕，但由於它在那一刻是不可見的，所以它沒有做到這一點。

解決方案：您可能希望捕獲上一個和下一個事件，然后嘗試使用您的代碼。