Обрезка блоков текста с помощью line-clamp

Функция line-clamp находится в статусе ограниченной доступности в Baseline, но уже широко используется для создания аккуратных текстовых блоков. Это свойство позволяет ограничить отображение текста заданным количеством строк, скрывая всё, что выходит за пределы. Оно идеально подходит для превью статей, цитат или карточек товаров, где нужно показать только часть текста, не перегружая страницу.

В основе line-clamp лежит комбинация свойств, включающих display: -webkit-box, -webkit-line-clamp и -webkit-box-orient: vertical. Современные браузеры поддерживают стандартное свойство line-clamp без префиксов, но для максимальной совместимости лучше использовать и префиксные версии. Это особенно важно для старых версий браузеров, таких как Safari.

Давайте разберём, как работает line-clamp, и посмотрим на несколько примеров.

Как работает line-clamp

Свойство line-clamp (или его префиксная версия -webkit-line-clamp) указывает, сколько строк текста должно отображаться. Всё, что выходит за эти границы, обрезается, а для скрытия лишнего текста используется overflow: hidden. Чтобы это работало, нужно задать блоку свойство display: -webkit-box и указать ориентацию строк с помощью -webkit-box-orient: vertical.

Современный синтаксис позволяет использовать line-clamp напрямую, без префиксов, что упрощает код. Например:

.block {
  line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Этот код ограничит текст до трёх строк, а всё, что выходит за пределы, будет скрыто.

Простое ограничение текста

Представим, что у нас есть описание статьи, и мы хотим показать только первые три строки. Вот как это можно сделать:

<style>
.description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>

<p class="description">
  Это длинное описание статьи, которое рассказывает о чём-то очень интересном и важном. 
  Оно может быть длинным, но мы хотим показать только первые три строки, чтобы сохранить место 
  и сделать страницу более компактной.
</p>

В результате текст обрежется после трёх строк, и пользователь увидит только начало описания.

Добавление многоточия

Чтобы сделать обрезку текста более наглядной, можно добавить многоточие (...) в конце обрезанного текста. Для этого часто используют псевдоэлемент ::after или полагаются на браузерную обработку. Однако стандартное свойство line-clamp уже автоматически добавляет многоточие в современных браузерах.

<style>
.clamped-text {
  line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>

<p class="clamped-text">
  Это пример текста, который будет обрезан после двух строк. 
  Браузер автоматически добавит многоточие, чтобы показать, что текст обрезан.
</p>

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

Комбинирование с другими стилями

Свойство line-clamp можно комбинировать с другими CSS-свойствами, например, с max-height или width, чтобы ещё точнее контролировать отображение текста.

<style>
.card-text {
  width: 300px;
  line-clamp: 4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.5;
}
</style>

<div class="card-text">
  Этот текст находится в карточке с фиксированной шириной. Он ограничен четырьмя строками, 
  и всё, что выходит за пределы, будет скрыто. Это удобно для карточек товаров или новостей.
</div>

Здесь текст ограничен не только количеством строк, но и шириной блока, что делает его идеальным для карточек или других компактных элементов интерфейса.

Совместимость и ограничения

На октябрь 2025 года свойство line-clamp поддерживается во всех современных браузерах, включая Chrome, Firefox, Edge и Safari. Однако для старых версий Safari (до 17) требуется использовать префиксные свойства (-webkit-line-clamp). Проверьте поддержку на Can I Use.

Важно помнить, что line-clamp работает только с блочными элементами, у которых есть чётко заданная высота строки или ширина. Если текст не обрезается, проверьте, правильно ли заданы display и overflow.

Свойство line-clamp — это простой и эффективный способ ограничить текст по количеству строк, сохраняя аккуратный вид страницы. Оно особенно полезно для интерфейсов, где нужно показать только часть контента, например, в превью или карточках. Используйте его с префиксами для максимальной совместимости или переходите на стандартный синтаксис в современных проектах. Экспериментируйте с примерами выше, чтобы настроить отображение текста под ваши задачи!

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.