Својството 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,
кое го отсекува делот што излегува надвор вертикално