Свойство "overflow"

Свойство overflow управляет тем, как ведёт себя содержимое блочного элемента, если его размер превышает допустимую длину/ширину. [cut] Обычно блок увеличивается в размерах при добавлении в него элементов, заключая в себе всех потомков.

Но что, если высота/ширина указаны явно? Тогда блок не может увеличиться, и содержимое "переполняет" блок. Его отображение в этом случае задаётся свойством overflow.

Возможные значения

`visible` (по умолчанию)
`hidden`
`scroll`
`auto`

visible

Если не ставить overflow явно или поставить visible, то содержимое отображается за границами блока.

Например:

<!--+ autorun  no-beautify -->
<style>
  .overflow {
*!*
    /* overflow не задан */
*/!*
    width: 200px;
    height: 80px;
    border: 1px solid black;
  }
</style>

<div class="overflow">
  visible ЭтотТекстВылезаетСправаЭтотТекстВылезаетСправа
  Этот текст вылезает снизу Этот текст вылезает снизу
  Этот текст вылезает снизу Этот текст вылезает снизу
</div>

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

hidden

Переполняющее содержимое не отображается.

<!--+ autorun  no-beautify -->
<style>
  .overflow {
*!*
    overflow: hidden;
*/!*
    width: 200px;
    height: 80px;
    border: 1px solid black;
  }
</style>

<div class="overflow">
  hidden ЭтотТекстОбрезанСправаЭтотТекстОбрезанСправа
  Этот текст будет обрезан снизу Этот текст будет обрезан снизу
  Этот текст будет обрезан снизу Этот текст будет обрезан снизу
</div>

Вылезающее за границу содержимое становится недоступно.

Это свойство иногда используют от лени, когда какой-то элемент дизайна немного вылезает за границу, и вместо исправления вёрстки его просто скрывают. Как правило, долго оно не живёт, вёрстку всё равно приходится исправлять.

auto

При переполнении отображается полоса прокрутки.

<!--+ autorun  no-beautify -->
<style>
  .overflow {
*!*
    overflow: auto;
*/!*
    width: 200px;
    height: 100px;
    border: 1px solid black;
  }
</style>

<div class="overflow">
  auto ЭтотТекстДастПрокруткуСправаЭтотТекстДастПрокруткуСправа
  Этот текст даст прокрутку снизу Этот текст даст прокрутку снизу
  Этот текст даст прокрутку снизу
</div>

scroll

Полоса прокрутки отображается всегда.

<!--+ autorun  no-beautify -->
<style>
  .overflow {
*!*
    overflow: scroll;
*/!*
    width: 200px;
    height: 80px;
    border: 1px solid black;
  }
</style>

<div class="overflow">
  scroll
  Переполнения нет.
</div>

То же самое, что auto, но полоса прокрутки видна всегда, даже если переполнения нет.

overflow-x, overflow-y

Можно указать поведение блока при переполнении по ширине в overflow-x и высоте -- в overflow-y:

<!--+ autorun  no-beautify -->
<style>
  .overflow {
*!*
    overflow-x: auto;
    overflow-y: hidden;
*/!*
    width: 200px;
    height: 80px;
    border: 1px solid black;
  }
</style>

<div class="overflow">
  ПоШиринеПолосаПрокруткиAutoПоШиринеПолосаПрокруткиAuto
  Этот текст вылезает снизу Этот текст вылезает снизу
  Этот текст вылезает снизу Этот текст вылезает снизу
</div>

Итого

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

`visible`: По умолчанию, содержимое вылезает за границы блока.
`hidden`: Переполняющее содержимое невидимо.
`auto`: Полоса прокрутки при переполнении.
`scroll`: Полоса прокрутки всегда.

Кроме того, значение overflow: auto | hidden изменяет поведение контейнера, содержащего float'ы. Так как элемент с float находится вне потока, то обычно контейнер не выделяет под него место. Но если стоит такой overflow, то место выделяется, т.е. контейнер растягивается. Более подробно этот вопрос рассмотрен в статье .

5.8 KiB Raw Blame History Unescape Escape