Свойство CSS block-overflow

Свойство block-overflow управляет тем, что происходит в точке, где блочный контейнер обрезается в блочном направлении (вертикально, в горизонтальных режимах письма). Вместо того чтобы просто обрывать текст, оно позволяет отмечать точку обрезки многоточием (…) или произвольной строкой, сигнализируя читателю о том, что контент продолжается.

Свойство является частью CSS Overflow Module Level 4 и представляет собой многострочный аналог text-overflow: там, где text-overflow: ellipsis обрезает одну строку в строчном направлении, block-overflow управляет маркером, отображаемым при обрезке контента на нескольких строках (например, с помощью max-lines или line-clamp).

block-overflow действует только в точке принудительной обрезки — например, на последней видимой строке, допускаемой max-lines, или на строке, непосредственно предшествующей разрыву области. Само по себе оно не ограничивает количество отображаемых строк; для этого его нужно сочетать с max-lines.

Синтаксис

block-overflow: clip | ellipsis | <string>;

Значение — это одно ключевое слово (clip или ellipsis) либо строка в кавычках (<string>).

Обрезка нескольких строк

block-overflow предназначено для совместной работы с max-lines, которое ограничивает количество строк, и свойством continue, которое помечает блок как допускающий обрезку. Пример ниже ограничивает описание карточки тремя строками и показывает многоточие на третьей:

.card-description {
  max-lines: 3;            /* keep only the first three lines      */
  continue: discard;       /* truncate the rest                    */
  block-overflow: ellipsis; /* show … at the truncation point      */
}

<p class="card-description">
  This description is long enough to wrap onto many lines. Only the
  first three are kept, and the third ends with an ellipsis so the
  reader knows the text continues beyond what is shown here.
</p>

Поскольку ни один браузер пока не поддерживает этот набор свойств, практическим аналогом, работающим в продакшне, является line-clamp:

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

Связь с line-clamp

Свойство line-clamp является сокращённой записью, которая задаёт max-lines, block-overflow и continue одновременно. Запись line-clamp: 3 подразумевает block-overflow: ellipsis и ограничивает блок тремя строками, поэтому вы редко задаёте block-overflow напрямую — line-clamp устанавливает его за вас.

Значения

Произвольная строка заменяет стандартное многоточие. Это удобно для локализованных или брендированных маркеров обрезки, таких как "… read more":

.custom-ellipsis {
  block-overflow: "… read more";
}

block-overflow и text-overflow

Эти два свойства решают связанные задачи по разным осям и легко перепутать:

Если нужен однострочный заголовок, оканчивающийся многоточием, используйте text-overflow. Если нужен многострочный отрывок, оканчивающийся многоточием, используйте line-clamp сегодня (и block-overflow, когда браузеры его поддержат).

Практика