Плагин jquery dotdotdot (добавляет многоточие) не работает с каруселью Bootstrap

Я использую карусель Bootstrap 3 для своего приложения Rails 4. Чтобы обрезать более длинные заголовки в карусели, я использую плагин jquery dotdotdot, который также добавляет "..." в конце. Хотя плагин работает для первого изображения в карусели, он не работает для последующих изображений.

Вот jsfiddle: http://jsfiddle.net/michaelvli/GD3JH/9/

Почему dotdotdot не выполняется для всех заголовков карусели? Я пытался использовать обработчик событий карусели для запуска плагина каждый раз, когда карусель скользит, но это решение не подходит, так как пользователь увидит полный заголовок за короткий промежуток времени до того, как dotdotdot сможет выполнить:

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

В качестве альтернативы, если кто-то может порекомендовать другое решение, которое усекает многострочные заголовки, добавляя в конце "...", это тоже было бы здорово.

Источник

3 ответа

Решение

Проблема в том, что, поскольку он не показывает все элементы, он не применяет ... в конце каждого скрытые не активируются. Чтобы решить эту проблему, у нас есть все предметы, чтобы быть классом active item поэтому они отображаются, затем переключите все, кроме первого слайда (или элемента 0) на item, Чтобы скрыть их снова. Таким образом, мы можем добавить это:

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

Теперь у нас есть все элементы, на которые правильно воздействует точка.

Скрипка здесь

Источник

Вы можете добавить авто многоточие с помощью 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>
Источник

Добавлено в код Спенсера Вечорека

Для нескольких каруселей на одной странице, которая добавляет активный класс ко всем классам элементов карусели и удаляет все активные классы после точки 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/

Источник
Другие вопросы по тегам