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

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

Синтаксис

/* 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, но при этом создаётся новый контекст блочного форматирования.

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

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

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;
}
#clip {
  overflow-block: clip;
}
#visible {
  overflow-block: visible;
}
#auto {
  overflow-block: auto;
}

Результат

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

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

См. также

• text-overflow, white-space, overflow, overflow-inline, overflow-x, overflow-y, clip, display
• Логические свойства CSS
• Модуль переполнения CSS
• Модуль стилизации полос прокрутки CSS
• Режимы письма CSS
• Изучите: переполняющее содержимое