Поведение переполненного блока: overflow

overflow

Поддержка браузерами
Настольные браузеры Chrome Firefox Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 1.0 1.0 4.0 7.0 1.0
Мобильные браузеры Android Firefox Mobile IE Phone Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 4.0.3 1.0 7.5 18.0 6.1.3
Свойство
overflow — это свойство определяет поведение переполненного блока
Описание
Предположим что какому-то блоку задано значение ширины и высоты и если контент, содержащийся в блоке, не может уместиться в заданные размеры, то при помощи свойства overflow существует возможность определить поведение переполненного блока
Наследование
Не наследуется. Это значит что стили применённые к родительскому элементу не передадутся потомкам
Применяется
К незамещаемым блочным элементам и к незамещаемым встроенным элементам
Может принимать значения
visible | hidden | scroll | auto | inherit
Значение по умолчанию
visible
Правила записи
свойство: значение;
Примеры

<p>

Когда установленно значение visible, браузер разместит контент таким образом чтобы он был виден, даже если он не помещается в блок

</p>

Когда установленно значение hidden, браузер скроет контент, который не помещается в блок

<p>

Когда установленно значение hidden, браузер скроет контент, который не помещается в блок

</p>

<p>

Когда установленно значение scroll, браузер выставит полосы прокрутки. Следует помнить, что если установлено значение scroll, а контент помещается в элемент, то полосы прокрутки все равно будут видны

</p>

<p>

Когда установленно значение auto, браузер в случае переполнения блока выставит полосы прокрутки, а в случае когда элемент помещается в блок, полос прокрутки не будет видно

</p>

<p>

К этому блоку тоже применено значение auto, но содержимое блока полностью помещается в него, поэтому полос прокрутки не видно

</p>

<p>

Это значит что свойство унаследует значение от родителя

</p>

Поделиться