dotdotdot добавляет многоточие, даже если оно не обрезано

Я использую dotdotdot, чтобы обрезать текст в поле, указанном высотой

<div class="product-description dotdotdot" style="word-wrap: break-word;">
    <div class="product-description-icon">
        <span>
            <img src="product_gloves.png" alt="Gloves">
        </span>
    </div>
    <h4>Gloves</h4>
    <p>Some gloves text...</p>
</div>

JQuery:

$(".product-description.dotdotdot").dotdotdot({
    watch: true
});

мой product-description dotdotdot минимальная высота 100 пикселей, а текст имеет многоточие в конце, но текст не обрезан, и все еще остается много свободного места.

Спасибо за помощь

Источник

2 ответа

Я скачал dotdotdot и следовал за README.md, и он работает нормально (кроме $(window).resize).

Возможно, вам придется предоставить больше контекста с вашим вопросом:

  • Включаете ли вы все необходимое? .js файлы в <head> вашей разметки и в правильном порядке?
  • Ваш jQuery завернут в $(document).ready(function() { ваш сценарий });

Я еще не подробно изучил скрипт dotdotdot. Мой стреляет, используя именно этот скрипт:

$(document).ready(function() {
    $(".wrapper").dotdotdot({
        // configuration goes here
    });
});

С первого взгляда мне интересно, если ваш выбор имени класса .dotdotdot может быть причиной проблем. Возможно переименуйте свой класс (ы), чтобы читать .product-description-wrapper и запустите скрипт в этом классе.

Надеюсь, это поможет вам

Источник

Я бы использовал чистый подход CSS3 вместо jQuery.

Вот два моих любимых миксина SASS, позволяющие одновременно переносить слова или многоточие;

@mixin word-wrap() {
  word-break:     break-word;
  -webkit-hyphens: auto;
  -moz-hyphens:    auto;
  hyphens:         auto;
}

@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
Источник
Другие вопросы по тегам