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

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

Этот текст очень длинный, а высота его контейнера всего 100px. Поэтому, чтобы пользователь мог комфортно прочитать этот текст, добавляется полоса прокрутки... Вот вам яркий пример современных тенденций — дальнейшее развитие различных форм деятельности является качественно новой ступенью экспериментов, поражающих по своей масштабности и грандиозности. Равным образом, базовый вектор развития позволяет выполнить важные задания по разработке инновационных методов управления процессами. Сложно сказать, почему многие известные личности являются только методом политического участия и рассмотрены исключительно в разрезе маркетинговых и финансовых предпосылок.

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

Свойство overflow может принимать следующие значения:

  • visible - Значение по умолчанию. Переполнение не обрезается. Контент отображается за пределами элемента.
  • hidden - Переполнение обрезается, не поместившаяся часть контента будет не видна.
  • scroll - Переполнение обрезается, для возможности просмотра не поместившейся части контента добавляется полоса прокрутки.
  • auto - То же, что и значение scroll, но полоса прокрутки добавляется только при необходимости.

Свойство overflow работает только с блоковыми элементами, у которых задана высота.

В системе OS X Lion (на Mac) полоса прокрутки по умолчанию скрыта и появляется только когда используется (даже если задано значение "overflow:scroll").

overflow: visible

По умолчанию у свойства overflow установлено значение visible, что означает, что переполняющий контент не обрезается и отображается за пределами элемента контейнера:

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

div {
  width: 200px;
  height: 65px;
  background-color: coral;
  overflow: visible;
}

overflow: hidden

Со значением hidden переполнение обрезается, а не поместившаяся часть контента будет скрыта:

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

div {
  overflow: hidden;
}

overflow: scroll

При заданном значении scroll переполнение обрезается, а внутри элемента контейнера добавляется полоса прокрутки, чтобы можно было просмотреть не поместившуюся часть контента. Обратите внимание, что будут добавлены обе полосы прокрутки - горизонтальная и вертикальная (даже если по факту они не нужны):

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

div {
  overflow: scroll;
}

overflow: auto

Значение auto аналогично значению scroll, но при этом полосы прокрутки добавляются при необходимости:

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

div {
  overflow: auto;
}

overflow-x и overflow-y

Свойства overflow-x и overflow-y определяют каким именно переполнением контента мы будем управлять - только горизонтальным или только вертикальным (или обоими):

overflow-x определяет, что делать с левым/правым краем контента.
overflow-y определяет, что делать с верхним/нижним краем контента.

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

div {
  overflow-x: hidden; /* Скрыть горизонтальную полосу прокрутки */
  overflow-y: scroll; /* Добавить вертикальную полосу прокрутки */
}


Все CSS свойства управления переполнением элемента

Свойство Описание
overflow Определяет, каким образом будет отображаться содержимое элемента, если оно не помещается в область вывода данного элемента
overflow-wrap Определяет, должен ли браузер переносить длинные слова на новую строку при переполнении контейнерного элемента
overflow-x Определяет, как будет отображаться содержимое элемента, если оно не помещается слева/справа в область вывода данного элемента
overflow-y Определяет, как будет отображаться содержимое элемента, если оно не помещается вверху/внизу в область вывода данного элемента