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

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

WARNING

Если блок не содержит блочной строки непосредственно перед разрывом региона, свойство block-overflow не работает. (Разрыв региона возникает, когда содержимое перетекает в CSS-регион или многостолбцовую верстку.)

Начальное значение	clip
Применяется к	Блочным контейнерам.
Наследуется	Нет.
Анимация	Нет.
Версия	CSS Overflow Module Level 4
DOM-синтаксис	object.style.blockOverflow = "ellipsis";

Синтаксис

Синтаксис свойства CSS block-overflow

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

Практический пример

Пример использования свойства CSS block-overflow

.module {
  block-overflow: ellipsis;
}

<div class="module">
  <p>This is a long paragraph that will be clipped at the container's edge, with an ellipsis added to indicate more content follows.</p>
</div>

Взаимосвязь с line-clamp

Свойство CSS line-clamp является сокращением для overflow-block и max-lines. Оно подразумевает block-overflow: ellipsis и ограничивает текст заданным количеством строк.

Значения

Значение	Описание
clip	Содержимое обрезается по краю блока.
ellipsis	Отображает многоточие (...) в конце последней строки. Отображается как символ Unicode (U+2026), но может быть заменено на эквивалент в зависимости от языка содержимого и режима письма используемого пользовательского агента.
<string>	Отображает указанную строку в качестве многоточия переполнения блока в конце последней строки. Браузер может усечь строку, если она слишком длинная.

.custom-ellipsis {
  block-overflow: "...";
}

Практика

Как используется свойство CSS overflow?

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