Свойство overflow указывает браузеру, как поступать с содержимым (текст, картинки, другие блоки), которое вылазит за границы блока (за его ширину или высоту). Браузер может скрыть вылезающую часть, добавить полосы прокрутки или ничего не делать (оставить как есть - вылезшим за границы).

Свойства overflow-x и overflow-y определяют, что делать с содержимым, которое вылазит по ширине и по высоте соответственно (overflow задает одновременно для обоих направлений).

См. также CSS свойства word-break, word-wrap, overflow-wrap, hyphens, white-space, а также символы мягкого переноса wbr и ­.

См. также свойство text-overflow, которое добавляет троеточие в конец обрезанного текста.

Синтаксис

селектор {
	overflow:  hidden | scroll | auto | visible | inherit;
}
селектор {
	overflow-x и overflow-y: нет значения inherit
}

Значения

Значение Описание
hidden Скрывает то содержимое, которое вылезло за границы блока.
scroll Добавляет полосы прокрутки, причем всегда, даже если ничего не вылазит (в этом случае они будут неактивными).
auto Добавляет полосы прокрутки при необходимости: если содержимое не помещается - они появятся, если все помещается - их не будет.
visible Не скрывает то содержимое, которое вылезло за границы блока.
inherit Наследует значение родителя. Только для overflow (overflow-x и overflow-y не поддреживают).

Значение по умолчанию: visible.

Примеры

Значение visible

В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы. Обрезания не происходит:

#elem {
	overflow: visible;
	border: 1px solid red;
	width: 200px;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.

А сейчас ограничена не только ширина, но и высота (текст вылезет за блок и по высоте):

#elem {
	width: 200px;
	height: 40px;
	overflow: visible;
	border: 1px solid red;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.

Значение hidden

Сейчас все, что вылезло за границы контейнера просто обрежется (и по высоте тоже). Обратите внимание на то, что обрезание по высоте происходит только тогда, когда она задана явно (в нашем случае height: 40px). В противном случае текст расширяет контейнер по высоте - и никакого обрезания не будет.

#elem {
	overflow: hidden;
	width: 200px;
	height: 40px;
	border: 1px solid red;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.

Значение scroll

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

#elem {
	overflow: scroll;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.

Значение auto

Полосы прокрутки добавляются только, если содержимое вылазит за контейнер. Сейчас их нет, так как все помещается:

#elem {
	overflow: auto;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.

А теперь ограничим ширину - появится горизонтальная полоса прокрутки:

#elem {
	width: 200px;
	overflow: auto;
	height: 100px;
	border: 1px solid red;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.