Как добавить многоточие при сворачивании текста в Readmore.js

При использовании плагина Readmore.js на сайте Tilda или любом другом проекте часто возникает задача показать многоточие в конце свёрнутого блока. Стандартный функционал плагина не добавляет многоточие автоматически. В этой статье мы разберём, как реализовать появление многоточия в закрытом состоянии и его исчезновение при раскрытии текста.

Почему многоточие не появляется по умолчанию?

Плагин Readmore.js обрезает текст по высоте, но не вставляет символ многоточия. Он лишь скрывает нижнюю часть контента и показывает ссылку «Подробнее». Чтобы добавить многоточие, нужно использовать CSS-псевдоэлементы или JavaScript для динамического управления видимостью точек.

Простое CSS-решение с псевдоэлементом ::after

Самый надёжный способ - добавить многоточие через стили. Для этого мы используем псевдоэлемент ::after на контейнере текста. Когда блок свёрнут, многоточие отображается; при раскрытии - скрывается.

Шаг 1. HTML-структура

Убедитесь, что у блока с текстом есть уникальный ID (например, rec779589211). Ваш код уже содержит этот ID, поэтому переходим к стилям.

Шаг 2. CSS для многоточия

Добавьте следующий код в ваш файл стилей или в блок <style>:

#rec779589211 .t-text {
  position: relative;
}

#rec779589211 .t-text::after {
  content: '...';
  position: absolute;
  bottom: 0;
  right: 0;
  background: white;
  padding-left: 5px;
  font-size: 24px;
  line-height: 1;
  pointer-events: none;
}

#rec779589211 .t-text.readmore-open::after {
  content: none;
}

Здесь .readmore-open - класс, который плагин Readmore.js добавляет к блоку при раскрытии. Когда блок открыт, многоточие исчезает.

Шаг 3. JavaScript для управления классом

Плагин Readmore.js не добавляет класс .readmore-open автоматически. Его нужно добавить вручную в колбэках beforeToggle и afterToggle:

longText.readmore({
  speed: 200,
  collapsedHeight: collapsedHeight,
  moreLink: '<a href="#read-more" class="' + longTextClasses + ' t-name read-more"><u>Подробнее</u></a>',
  lessLink: '<a href="#read-less" class="' + longTextClasses + ' t-name read-less"><u>Скрыть</u></a>',
  beforeToggle: function(trigger, element, expanded) {
    if (expanded) {
      element.addClass('readmore-open');
    } else {
      element.removeClass('readmore-open');
    }
  }
});

Альтернативный способ: через JavaScript

Если CSS-решение не подходит, можно вставлять многоточие через JavaScript при сворачивании. Для этого в колбэке afterToggle проверяйте состояние блока и добавляйте/удаляйте символ ... в конец текста. Однако этот метод сложнее и может нарушить структуру контента.

Проверка результата

После внесения изменений:

• В свёрнутом состоянии в конце первой строки появится многоточие.
• При клике на «Подробнее» многоточие исчезнет.
• При повторном сворачивании многоточие вернётся.

Убедитесь, что цвет фона многоточия совпадает с фоном блока (в примере background: white). Если фон другой, замените значение.

Частые ошибки и их решение

Многоточие не появляется. Проверьте, что класс readmore-open корректно добавляется. Откройте консоль браузера и посмотрите, меняется ли класс при клике.

Многоточие видно даже при раскрытом тексте. Убедитесь, что селектор .readmore-open::after имеет больший приоритет, чем обычный ::after. Можно добавить !important.

Многоточие перекрывает последнее слово. Увеличьте padding-left или используйте background: linear-gradient для плавного перехода.