Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
157 lines (120 sloc) 5.67 KB

Свойство "overflow"

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

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

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

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

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

visible

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

Например:

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

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

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

hidden

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

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

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

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

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

auto

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

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

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

scroll

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

<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:

<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, то место выделяется, т.е. контейнер растягивается. Более подробно этот вопрос рассмотрен в статье info:float.