Многоточие в конце переполненного блока CSS: многострочность

Быстрый ответ

Если требуется добавить многоточие к многострочному блоку в CSS, применяется свойство -webkit-line-clamp. С его помощью текст обрезается после определённого числа строк, а затем ставится многоточие.

Пример кода:

.ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; // Определяем количество строк перед достижением многоточия
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

<div class="ellipsis">
  Слишком длинный текст будет обрезан после двух строк и завершён многоточием...
</div>

Путем изменения значения -webkit-line-clamp можно регулировать число строк, после которого происходит обрезание текста.

Рекомендации по совместимости

-webkit-line-clamp предназначено для использования в браузерах на базе WebKit, например, Chrome и Safari. Для обеспечения оптимальной совместимости с различными браузерами рекомендуется дополнительно использовать градиент для более плавного исчезновения текста, либо JavaScript для реализации более сложных вариантов.

jQuery на помощь

Если CSS не выполняет требуемых действий, помочь может jQuery. Такие плагины как dotdotdot, jquery.autoellipsis и jquery-truncate отлично справляются с проблемой многострочного переполнения текста.

Пример использования плагина 'dotdotdot':

$(".multiline").dotdotdot({
  // Конфигурация плагина
});

Помните, что использование плагинов может влиять на производительность. Поэтому важно подбирать их обдуманно.

Плавный эффект затухания с помощью CSS

Многоточие – это не единственный способ. Можно создать элегантный эффект затухания с помощью линейного градиента, который будет аккуратно скрывать текст, выходящий за пределы.

Пример создания эффекта:

.fade-out {
  position: relative;
  max-height: 4.5em;
  overflow: hidden;
  line-height: 1.5em;
}

.fade-out:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 1.5em;
  background: linear-gradient(to right, transparent, white 50%);
}

Сочетание max-height и overflow: hidden помогает обеспечить эффект красивого обрезания текста.

Учет баланса текста в дизайне

Многострочное обрезание текста требует тщательно продуманного дизайна, включая цвета фона, интервал между строками и размещение элементов, а также корректное размещение многоточия, предпочтительно в конце последней видимой строки.

Творческие приёмы CSS

Для браузеров без поддержки WebKit можно использовать псевдоэлементы и абсолютное позиционирование для имитации многострочного многоточия. Создавайте условия для его вывода только тогда, когда текст выходит за границы блока.

Визуализация

Рассмотрим на примере, как обрезается текст с многоточием в многострочном блоке:

Блок с текстом: [📝📝📝📝]

Применяем CSS:

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

В результате получим:

Ваш блок:
[📝📝📝...]

Теперь текст укладывается в 3 строки и заканчивается многоточием.

Адаптация под различные платформы

Многострочное многоточие не подходит для всех случаев. Следует учитывать поддержку старых версий браузеров, сохранять отведенное пространство для многоточия и адаптировать размеры для различных устройств. В качестве альтернативы можно использовать JavaScript.

Будьте аккуратны, чтобы создать удобный для пользователя интерфейс при работе с переполнением текста.

Полезные материалы

1. line-clamp | CSS-Tricks – подробное руководство по многострочному многоточию в CSS с использованием line-clamp.
2. text-overflow – CSS: Cascading Style Sheets | MDN – полное руководство MDN по обработке переполнения текста.
3. Can I use... Support tables for HTML5, CSS3, etc – проверьте совместимость браузеров с помощью свойства CSS text-overflow.
4. CSS Overflow Module Level 3- официальная спецификация W3C по управлению overflow.
5. html – Applying an ellipsis to multiline text – Stack Overflow – подходы и решения сообщества разработчиков для многострочного обрезания текста.
6. How to Draw a Cartoon Nose | Envato Tuts+ – нестандартный урок по рисованию.
7. Size Matters: Balancing Line Length And Font Size In Responsive Web Design — Smashing Magazine – полезные советы по адаптивной типографике, которые дополнят работу по обрезанию переполненного текста.