overflow-block

Baseline 2025 *

Newly available

Since ⁨September 2025⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

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

Примечание: Свойство overflow-block отображается на overflow-y или overflow-x в зависимости от режима записи документа.

Синтаксис

css

/* Значения свойства */
overflow-block: visible;
overflow-block: hidden;
overflow-block: scroll;
overflow-block: auto;
/* Глобальные значения */
overflow-block: inherit;
overflow-block: initial;
overflow-block: unset;

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

Значения

visible: Содержимое не обрезается и может отображаться за пределами начального и конечного краёв блока отступа.
hidden: При необходимости содержимое обрезается, чтобы соответствовать размеру блока в поле заполнения. Полосы прокрутки отсутствуют.
scroll: При необходимости содержимое обрезается, чтобы поместиться в размер блока в поле заполнения. Браузеры отображают полосы прокрутки вне зависимости от того, вырезано ли содержимое. (Это предотвращает появление или исчезновение полос прокрутки при изменении содержимого.) Принтеры могут по-прежнему печатать переполненное содержимое.
auto: Зависит от пользовательского агента. Если содержимое помещается в поле дополнения, оно выглядит так же, как visible, но всё же устанавливает новый контекст форматирования блока. Настольные браузеры устанавливают полосы прокрутки, если содержимое переполняется.

Формальное определение

Начальное значение	`auto`
Применяется к	Block-containers, flex containers, and grid containers
Наследуется	нет
Обработка значения	as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of `overflow-x` or `overflow-y` is neither `visible` nor clip
Animation type	discrete

Формальный синтаксис

overflow-block = 
 visible | 
 hidden | 
 clip | 
 scroll | 
 auto

Примеры

HTML

html

<ul>
 <li>
 <code>overflow-block:hidden</code> — скрывает текст за пределами поля
 <div id="div1">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
 velit esse cillum dolore eu fugiat nulla pariatur.
 </div>
 </li>
 <li>
 <code>overflow-block:scroll</code> — всегда добавляет полосу прокрутки
 <div id="div2">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
 velit esse cillum dolore eu fugiat nulla pariatur.
 </div>
 </li>
 <li>
 <code>overflow-block:visible</code> — отображает текст вне поля, если это
 необходимо
 <div id="div3">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
 velit esse cillum dolore eu fugiat nulla pariatur.
 </div>
 </li>
 <li>
 <code>overflow-block:auto</code> — в большинстве браузеров, что эквивалентно
 <code>scroll</code>
 <div id="div4">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
 velit esse cillum dolore eu fugiat nulla pariatur.
 </div>
 </li>
</ul>

CSS

css

#div1,
#div2,
#div3,
#div4 {
 border: 1px solid black;
 width: 250px;
 height: 100px;
}
#div1 {
 overflow-block: hidden;
 margin-bottom: 12px;
}
#div2 {
 overflow-block: scroll;
 margin-bottom: 12px;
}
#div3 {
 overflow-block: visible;
 margin-bottom: 120px;
}
#div4 {
 overflow-block: auto;
 margin-bottom: 120px;
}

Результат

[フレーム]

Спецификации

Specification
CSS Overflow Module Level 3 # overflow-control

Совместимость с браузерами

Смотрите также

Связанные свойства CSS: text-overflow, white-space, overflow, overflow-inline, overflow-x, overflow-y, clip, display
Логические свойства CSS
Режимы письма

Help improve MDN

Learn how to contribute

This page was last modified on ⁨7 нояб. 2025 г.⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content