Својство 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,
које сече делове који излазе по вертикали