Question

我在我的Rails 4应用程序中使用Bootstrap 3轮播。为了在旋转木马中截断更长的字幕，我使用了jquery dotdotdot插件，该插件也附加了＆＃34; ...＆＃34;在末尾。虽然插件适用于旋转木马中的第一个图像，但它不适用于后续图像。

这里是jsfiddle： http://jsfiddle.net/michaelvli/GD3JH/9/

为什么dotdotdot没有在旋转木马的所有字幕上执行？我尝试使用轮播事件处理程序在每次轮播幻灯片时执行插件但这个解决方案并不合适，因为用户在dotdotdot有机会执行之前会看到完整的标题片刻：

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

或者，如果有人可以推荐另一种截断多行字幕的解决方案，同时附加＆＃34; ...＆＃34;到最后，那也很棒。

Answer 1

问题在于，由于未显示所有项目，因此未在每个项目结束时应用...，因此隐藏的项目未激活。为了解决这个问题，我们将所有项目都设置为类active item，然后显示它们，然后将除第一张幻灯片（或元素0）之外的所有项目切换为item。再次隐藏它们。所以我们可以补充一下：

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

现在我们所有的项目都被dotdotdot正确地影响了。

Fiddle Here

Answer 2

您实际上可以使用css

添加自动省略号

css：

.ellipsis {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;  
                -o-text-overflow: ellipsis;  
            }

这是你的更新小提琴..我已经把你的dotdotdot插件留在那里，但你真的不再需要了它

http://jsfiddle.net/gsiry01/Ahhc6/1/

我基本上已将省略号类添加到您的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>

Answer 3

添加到Spencer Wieczorek的代码

对于同一页面上的多个轮播，它会为所有轮播项目类添加一个活动类，并删除dotdotdot js之后的所有活动类，除了每个轮播的第一个项目

$(".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');
        }
    });
});

http://jsfiddle.net/ardieziff/xj5jn7L5/

jquery dotdotdot插件（添加省略号）不与Bootstrap轮播一起使用

3 个答案: