Lastnost overflow

Lastnost overflow določa brskalniku, kako ravnati z vsebino (besedilo, slike, drugi bloki), ki štrli iz meja bloka (izven njegove širine ali višine). Brskalnik lahko skrije štrleči del, doda drsnike ali ne naredi nič (pusti tako, kot je - štrleče iz meja).

Sintaksa

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

Vrednosti

Vrednost	Opis
`hidden`	Skrije vsebino, ki štrli iz meja bloka.
`scroll`	Doda drsnike, in to vedno, tudi če nič ne štrli (v tem primeru bodo neaktivni).
`auto`	Doda drsnike po potrebi: če se vsebina ne prilega - se bodo pojavili, če se vse prilega - jih ne bo.
`visible`	Ne skrije vsebine, ki štrli iz meja bloka.

Privzeta vrednost: visible.

Primer . Vrednost visible

V tem primeru se zelo dolga beseda ne bo prilegala v vsebnik in bo štrlela iz njegovih meja. Do obrezovanja ne pride:

<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

Tokrat ni omejena le širina, temveč tudi višina (besedilo bo štrlelo iz bloka tudi po višini):

<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

Tokrat bo vse, kar štrli iz mej vsebnika, preprosto obrezano (tudi po višini). Bodite pozorni na to, da se obrezovanje po višini zgodi le, če je ta eksplicitno določena. V nasprotnem primeru besedilo razširi vsebnik po višini - in do obrezovanja ne bo prišlo:

<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

Pri vrednosti scroll bodo drsniki vedno prisotni, tudi če nič ne štrli (v tem primeru bodo neaktivni). Tokrat besedilo ne štrli ne po širini, ne po višini, vendar so drsniki kljub temu prisotni (neaktivni):

<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

Pri vrednosti auto se drsniki dodajo le, če vsebina štrli iz vsebnika. Tokrat jih ni, saj se vse prilega:

<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

Tokrat pa omejimo širino - pojavil se bo vodoravni drsnik:

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

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

Glejte tudi

lastnost word-break,
ki prenaša črke dolge besede v novo vrstico
lastnost overflow-wrap,
ki prenaša črke dolge besede v novo vrstico
lastnost overflow-x,
ki obreže dele, ki štrlijo vodoravno
lastnost overflow-y,
ki obreže dele, ki štrlijo navpično