В мире веб-разработки часто возникает необходимость красиво ограничить количество отображаемого текста, особенно в новостных блоках, карточках товаров или списках статей. CSS предлагает элегантное решение этой задачи с помощью свойства -webkit-line-clamp. Давайте разберёмся, как работает этот мощный инструмент.

Магия многоточия

Рассмотрим приведённый CSS-код:

.news_body p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

Этот небольшой набор свойств творит чудеса:

1. overflow: hidden — скрывает содержимое, выходящее за границы элемента
2. text-overflow: ellipsis — добавляет многоточие (…) в месте обрезания текста
3. display: -webkit-box — активирует гибкое блочное контекстное отображение
4. -webkit-line-clamp: 4 — ограничивает текст четырьмя строками
5. -webkit-box-orient: vertical — задаёт вертикальную ориентацию блока

Где применять?

Этот приём особенно полезен для:

• Новостных лент (как в нашем примере с классом .news_body)
• Карточек товаров в интернет-магазинах
• Списков статей или блогов
• Любых мест, где нужно показать «превью» контента

Преимущества

1. Чисто CSS-решение — не требует JavaScript
2. Адаптивность — корректно работает при изменении размеров экрана
3. Эстетика — аккуратные блоки с единообразным отображением
4. Простота — минимальный код для реализации

Ограничения

Важно помнить, что:

• Это свойство работает только в WebKit-браузерах (но имеет хорошую поддержку)
• Для кросс-браузерности может потребоваться фолбэк
• Не поддерживает точное ограничение по высоте (только по количеству строк)

Альтернативы

Если вам нужно более точное управление:

• Можно использовать JavaScript для обрезки текста
• Применить max-height с overflow: hidden
• Использовать CSS-функцию line-clamp (экспериментальная)

Заключение

-webkit-line-clamp — это прекрасный пример того, как современный CSS позволяет решать типовые задачи веб-разработки элегантно и эффективно. В следующий раз, когда вам понадобится ограничить текст до нескольких строк с красивым многоточием, вспомните об этом мощном инструменте.