overflow-block

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

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

Синтаксис

/* Keyword values */
overflow-block: visible;
overflow-block: hidden;
overflow-block: clip;
overflow-block: scroll;
overflow-block: auto;

/* Global values */
overflow-block: inherit;
overflow-block: initial;
overflow-block: revert;
overflow-block: revert-layer;
overflow-block: unset;

Свойство overflow-block задаётся с помощью единственного ключевого слова <overflow>:

Значения

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

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

Начальное значение	`auto`
Применимо к	Контейнерам блоков, контейнерам гибкой компоновки и контейнерам сетки
Наследуется	нет
Вычисленное значение	как указано, за исключением того, что `visible`/`clip` вычисляются в `auto`/`hidden` соответственно, если одно из `overflow-x` или `overflow-y` не равно `visible` или clip
Тип анимации	дискретный

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

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

Примеры

HTML

<ul>
  <li>
    <code>overflow-block: hidden</code> (hides the text outside the box)
    <div id="hidden">
      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> (always adds a scrollbar)
    <div id="scroll">
      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: clip</code> (hides the text outside the box beyond the
    overflow clip edge)
    <div id="clip">
      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> (displays the text outside the box if
    needed)
    <div id="visible">
      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> (on most browsers, equivalent to
    <code>scroll</code>)
    <div id="auto">
      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

div {
  border: 1px solid black;
  width: 250px;
  height: 100px;
  margin-bottom: 120px;
}

#hidden {
  overflow-block: hidden;
}
#scroll {
  overflow-block: scroll;
}
#scroll {
  overflow-block: clip;
}
#visible {
  overflow-block: visible;
}
#auto {
  overflow-block: auto;
}

Результат

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

Спецификация
CSS Overflow Module Level 3 # overflow-control

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`overflow-block`	Нет	Нет	69	Нет	Нет	Нет	79	Нет	Нет	Нет	Нет
`overlay`	Нет	Нет	112	Нет	Нет	Нет	112	Нет	Нет	Нет	Нет

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-block