Svojstvo overflow

Svojstvo overflow daje uputstvo pretraživaču, kako da postupi sa sadržajem (tekst, slike, drugi blokovi) koji izlazi izvan granica bloka (izvan njegove širine ili visine). Pretraživač može sakriti deo koji izlazi, dodati trake za skrolovanje ili ne uraditi ništa (ostaviti kako jeste - da izadje izvan granica).

Sintaksa

selektor {
	overflow: hidden | scroll | auto | visible;
}

Vrednosti

Vrednost	Opis
`hidden`	Sakriva sadržaj koji izlazi izvan granica bloka.
`scroll`	Dodaje trake za skrolovanje, i to uvek, čak i ako ništa ne izlazi (u tom slučaju one će biti neaktivne).
`auto`	Dodaje trake za skrolovanje po potrebi: ako se sadržaj ne uklapa - one će se pojaviti, ako sve stane - neće ih biti.
`visible`	Ne sakriva sadržaj koji izlazi izvan granica bloka.

Podrazumevana vrednost: visible.

Primer . Vrednost visible

U ovom primeru veoma dugačka reč neće stati u kontejner i izaći će izvan njegovih granica. Isecanje se ne događa:

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

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

Primer . Vrednost visible

A sada je ograničena ne samo širina, već i visina (tekst će izaći izvan bloka i po visini):

<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;
}

Primer . Vrednost hidden

Sada će sve što izadje izvan granica kontejnera jednostavno biti odsečeno (i po visini takođe). Obratite pažnju na to da se odsecanje po visini događa samo onda kada je ona eksplicitno zadata. U suprotnom slučaju tekst proširuje kontejner po visini - i nikakvo odsecanje se neće dogoditi:

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

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

Primer . Vrednost scroll

Kod vrednosti scroll trake za skrolovanje će biti uvek, čak i ako ništa ne izlazi (u tom slučaju one će biti neaktivne). Sada tekst ne izlazi ni po širini, ni po visini, ali trake za skrolovanje ipak postoje (neaktivne):

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

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

Primer . Vrednost auto

Kod vrednosti auto trake za skrolovanje se dodaju samo ako sadržaj izlazi izvan kontejnera. Sada ih nema, jer se sve uklapa:

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

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

Primer . Vrednost auto

A sada ćemo ograničiti širinu - pojaviće se horizontalna traka za skrolovanje:

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

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

Pogledajte takođe

svojstvo word-break,
koje prenosi slova duge reči u novi red
svojstvo overflow-wrap,
koje prenosi slova duge reči u novi red
svojstvo overflow-x,
koje odseca delove koji izlaze horizontalno
svojstvo overflow-y,
koje odseca delove koji izlaze vertikalno