Свойство overflow

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

Синтаксис

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

Стойности

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

Стойност по подразбиране: visible.

Пример . Стойност visible

В този пример много дълга дума няма да се събере в контейнера и ще излезе извън неговите граници. Подрязване не се извършва:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

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

Пример . Стойност visible

А сега е ограничена не само ширината, но и височината (текстът ще излезе извън блока и по височина):

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

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

Пример . Стойност hidden

Сега всичко, което излезе извън границите на контейнера, просто ще бъде отрязано (и по височина също). Обърнете внимание на това, че подрязването по височина се случва само тогава, когато тя е зададена изрично. В противен случай текстът разширява контейнера по височина - и няма да има подрязване:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	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
	loooooooooooooooooooooooooooooooongword,
	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
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

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

Пример . Стойност auto

А сега ограничаваме ширината - ще се появи хоризонтална лента за превъртане:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

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

Вижте също

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