freeCodeCamp/guide/russian/css/overflow/index.md

title, localeTitle

title	localeTitle
Overflow	Переполнение

Переполнение

Свойство overflow определяет, что произойдет, если содержимое переполнит поле элемента (это свойство работает только для элементов блока с указанной высотой).

Это свойство указывает, следует ли обрезать содержимое или добавить полосы прокрутки, если содержимое элемента слишком велико, чтобы поместиться в указанной области.

Например, заданный элемент уровня блока (<div>) имеет ширину 300px и содержит изображение шириной 400px. Изображение будет торчать из <div> и будет видимым по умолчанию. Однако, если значение overflow установлено в hidden, изображение будет обрезано в 300px.

Значения

• visible: Это значение свойства по умолчанию. Содержимое не обрезается, если оно больше блока.
• hidden: Переполненный контент будет скрыт.
• scroll: Похоже на hidden, но пользователи смогут прокручивать скрытое содержимое.
• auto: Если содержимое выходит за рамки своего блока, то это содержимое будет скрыто, в то время как полоса прокрутки должна быть видна для пользователей, чтобы прочитать остальную часть содержимого.
• initial: Использует значение visible по умолчанию.
• inherit: Задает для overflow значение родительского элемента.

Примеры

Visible:

.box-element { overflow: visible; }

Hidden:

.box-element { overflow: hidden; }

Scroll:

.box-element { overflow: scroll; }

Auto:

.box-element { overflow: auto; }

overflow-x и overflow-y

• overflow-x: Позволяет пользователю прокручивать содержимое, выходящее за пределы высоты элемента.
• overflow-y: Позволяет пользователю прокручивать содержимое, выходящее за пределы элемента.

  .box-element {
    overflow-x: scroll;
    overflow-y: auto;
  }

И .box-element будет выглядеть так:

Если содержимое переполняется по оси - Y, то это содержимое будет скрыто, в то время как полоса прокрутки должна быть видна для пользователей, чтобы прочитать остальную часть содержимого.

Подробная информация

• CSS-Tricks