jquery DotDot插件（添加省略号）不使用引导转盘

我正在为我的Rails4应用程序使用Bootstrap3Carousel。为了截断旋转木马中较长的标题，我使用了jquerydotdot插件，该插件在末尾还附加了“…”。虽然该插件适用于旋转木马中的第一个图像，但不适用于后续图像

以下是JSFIDLE：

为什么dotdot不在旋转木马的所有标题上执行？我曾尝试在每次旋转木马滑动时使用旋转木马事件处理程序来执行插件，但此解决方案不适用，因为在Dotdot有机会执行之前，用户会在短时间内看到完整的标题：

$('.carousel').on('slide.bs.carousel', function () {
    $('.dotdotdot').dotdotdot({});
});

---

或者，如果有人可以推荐另一种解决方案，在结尾添加“…”的同时截断多行标题，那也太好了。

您实际上可以使用css添加自动省略号

css:

这是你最新的小提琴。。我把你的dotdot插件放在那里了，但你真的不再需要它了

我基本上已经将省略号类添加到css中，并将省略号类添加到元素中

<p class='ellipsis'>BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH 1234 1234 1234 1234 1234 1234 1234 1234 </p>

诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类1234 1234 1234 1234 1234 1234 1234 1234 1234

---

您实际上可以使用css添加自动省略号

css:

这是你最新的小提琴。。我把你的dotdot插件放在那里了，但你真的不再需要它了

我基本上已经将省略号类添加到css中，并将省略号类添加到元素中

<p class='ellipsis'>BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH 1234 1234 1234 1234 1234 1234 1234 1234 </p>

诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类1234 1234 1234 1234 1234 1234 1234 1234 1234

---

问题在于，由于它没有显示所有项目，因此没有在每个项目末尾应用

…

，隐藏的项目没有激活。为了解决这个问题，我们将所有项目都设置为类

活动项目

，因此显示它们，然后将除第一张幻灯片（或元素0）以外的所有项目切换到

项目

。再把它们藏起来。因此，我们可以添加以下内容：

$( ".active.item" ).each(function( index ) {
    if(index != 0){
        $(this).removeClass('active');
    }
});

现在我们有了所有受点影响的项目

---

问题在于，由于它没有显示所有项目，因此没有在每个项目末尾应用

…

，隐藏的项目没有激活。为了解决这个问题，我们将所有项目都设置为类

活动项目

，因此显示它们，然后将除第一张幻灯片（或元素0）以外的所有项目切换到

项目

。再把它们藏起来。因此，我们可以添加以下内容：

$( ".active.item" ).each(function( index ) {
    if(index != 0){
        $(this).removeClass('active');
    }
});

现在我们有了所有受点影响的项目

---

添加到Spencer Wieczorek的代码中

对于同一页面上的多个旋转木马，这将向所有旋转木马项目类添加一个活动类，并删除DotDotJS之后的所有活动类，每个旋转木马的第一个项目除外

$(".item").each(function(){
   $(this).addClass('active');
})

$('.dotdotdot').dotdotdot({
    // configuration goes here
});
$(".carousel-inner").each(function(){
    $(this).find(".active.item").each(function( index ) {
        if(index != 0){
            $(this).removeClass('active');
        }
    });
});

---

添加到Spencer Wieczorek的代码中

对于同一页面上的多个旋转木马，这将向所有旋转木马项目类添加一个活动类，并删除DotDotJS之后的所有活动类，每个旋转木马的第一个项目除外

$(".item").each(function(){
   $(this).addClass('active');
})

$('.dotdotdot').dotdotdot({
    // configuration goes here
});
$(".carousel-inner").each(function(){
    $(this).find(".active.item").each(function( index ) {
        if(index != 0){
            $(this).removeClass('active');
        }
    });
});

---

谢谢你，斯宾塞。你完全正确。再补充一点，在我的应用程序的实际代码中，我必须将上面的代码放入回调函数中，以确保在剥离之前dotdot插件已完全执行。对于应该隐藏的幻灯片，激活。再次感谢！使所有项目处于活动状态是一次显示所有幻灯片，最初显示一段时间。有种打嗝的感觉。有什么想法吗？@AnkurAggarwal这是因为代码在

onload

之前不会运行，您可以将其更改为

onDomReady

。您还可以将

active

类添加到jQuery中的其他项中，这样就不会产生这种效果（最初只有第一张幻灯片

.active

）@SpencerWieczorek提出了我自己的解决方案。“幻灯片旋转木马”事件将点配置应用于当前幻灯片内容，效果良好。唯一需要做的就是为幻灯片转换添加setTimeOut以完成。谢谢，Spencer。你完全正确。再补充一点，在我的应用程序的实际代码中，我必须将上面的代码放入回调函数中，以确保在剥离之前dotdot插件已完全执行。对于应该隐藏的幻灯片，激活。再次感谢！使所有项目处于活动状态是一次显示所有幻灯片，最初显示一段时间。有种打嗝的感觉。有什么想法吗？@AnkurAggarwal这是因为代码在

onload

之前不会运行，您可以将其更改为

onDomReady

。您还可以将

active

类添加到jQuery中的其他项中，这样就不会产生这种效果（最初只有第一张幻灯片

.active

）@SpencerWieczorek提出了我自己的解决方案。“幻灯片旋转木马”事件将点配置应用于当前幻灯片内容，效果良好。唯一需要做的是为幻灯片转换添加setTimeOut以完成。谢谢，Gaetano。虽然我更喜欢像您这样的纯CSS解决方案，而不是需要添加更多Javascript的解决方案，但是在添加省略号之前显示多行文本的情况下，使用.ellipsis类是行不通的。这就是为什么我选择了@spencer的解决方案。谢谢，Gaetano。虽然我更喜欢像您这样的纯CSS解决方案，而不是需要添加更多Javascript的解决方案，但是在添加省略号之前显示多行文本的情况下，使用.ellipsis类是行不通的。这就是为什么我选择了@spencer的解决方案。