求助：Bootstrap轮播.carousel-caption文本截断仅首个元素生效问题

这个问题我之前也碰到过，根源其实和Bootstrap轮播的默认行为有关：Bootstrap的.carousel-inner会把非活跃的轮播项设置为display: none，而shave.js需要元素处于可见状态才能准确计算高度并完成文本截断——隐藏元素的高度无法被正确读取，所以只有第一个默认活跃的.carousel-caption能生效，其他被隐藏的就不行了。

知道原因后，解决思路就很清晰了：我们需要在轮播切换完成后，对当前显示的轮播项里的.carousel-caption重新调用shave.js，同时要注意保存原始文本避免重复截断导致内容丢失。

具体实现代码 #

这里用Bootstrap轮播的slid.bs.carousel事件（这个事件会在轮播切换完成后触发，此时新的轮播项已经完全可见）来处理：

// 页面加载完成后，先处理第一个活跃的轮播caption
$(document).ready(function() {
  // 保存所有caption的原始文本，避免重复截断丢失内容
  $('.carousel-caption').each(function() {
    $(this).attr('data-original-text', $(this).html());
  });
  
  // 初始化第一个活跃项的截断
  shave('.carousel-item.active .carousel-caption', 50); // 50是你需要的截断高度，可自行调整
});

// 监听轮播切换完成事件，处理当前活跃项的caption
$('.carousel').on('slid.bs.carousel', function() {
  // 先把所有caption恢复成原始文本
  $('.carousel-caption').each(function() {
    const originalText = $(this).attr('data-original-text');
    $(this).html(originalText);
  });
  
  // 对当前活跃的caption执行截断
  shave('.carousel-item.active .carousel-caption', 50);
});

为什么这个方案有效？ #

1. slid.bs.carousel事件确保我们在轮播项完全显示后再调用shave.js，此时元素的高度可以被正确计算，截断逻辑就能正常工作。
2. 通过data-original-text属性保存每个caption的原始内容，每次切换时先恢复原始文本再截断，避免多次截断导致文本被反复切割丢失。

至于你提到的去掉.carousel-inner类就正常的原因，是因为去掉后所有轮播项都会保持可见状态，shave.js能读取到每个元素的高度，自然都能生效，但这显然不符合轮播的展示需求，所以上面的事件驱动方案才是正确的解决方式。

内容的提问来源于stack exchange，提问作者xela84