Свойство overflow

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

Синтаксис

селектор {
	overflow: hidden | scroll | auto | visible;
}

Значения

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

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

Пример . Значение visible

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

<div id="elem">
	Lorem ipsum dolor sit amet
	оооооооооооооооооооооооооооооченьдлинноеслово,
	consectetur adipiscing elit.
</div>

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

Пример . Значение visible

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

<div id="elem">
	Lorem ipsum dolor sit amet
	оооооооооооооооооооооооооооооченьдлинноеслово,
	consectetur adipiscing elit.
</div>

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

Пример . Значение hidden

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

<div id="elem">
	Lorem ipsum dolor sit amet
	оооооооооооооооооооооооооооооченьдлинноеслово,
	consectetur adipiscing elit.
</div>

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

Пример . Значение scroll

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

<div id="elem">
	Lorem ipsum dolor sit amet
	оооооооооооооооооооооооооооооченьдлинноеслово,
	consectetur adipiscing elit.
</div>

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

Пример . Значение auto

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

<div id="elem">
	Lorem ipsum dolor sit amet
	оооооооооооооооооооооооооооооченьдлинноеслово,
	consectetur adipiscing elit.
</div>

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

Пример . Значение auto

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

<div id="elem">
	Lorem ipsum dolor sit amet
	оооооооооооооооооооооооооооооченьдлинноеслово,
	consectetur adipiscing elit.
</div>

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

Смотрите также

свойство word-break,
переносящее буквы длинного слова на новую строку
свойство overflow-wrap,
переносящее буквы длинного слова на новую строку
свойство overflow-x,
которое обрезает вылезающие по горизонтали части
свойство overflow-y,
которое обрезает вылезающие по вертикали части