Die overflow eienskap

Die eienskap overflow spesifiseer vir die blaaier, hoe om op te tree met inhoud (teks, beelde, ander blokke) wat oor die grense van die blok uitsteek (oor sy breedte of hoogte). Die blaaier kan die uitstekende deel versteek, rolbalke byvoeg of niks doen nie (los dit soos dit is - uitgesteek oor die grense).

Sintaksis

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

Waardes

Waarde	Beskrywing
`hidden`	Versteek die inhoud wat oor die blok se grense uitsteek.
`scroll`	Voeg rolbalke by, en wel altyd, selfs al steek niks uit nie (in hierdie geval sal hulle onaktief wees).
`auto`	Voeg rolbalke by wanneer nodig: as die inhoud nie pas - sal hulle verskyn, as alles pas - sal hulle nie daar wees nie.
`visible`	Versteek nie die inhoud wat oor die blok se grense uitsteek nie.

Standaardwaarde: visible.

Voorbeeld . Waarde visible

In hierdie voorbeeld sal 'n baie lang woord nie in die houer pas nie en sal oor sy grense uitsteek. Afsny gebeur nie:

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

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

Voorbeeld . Waarde visible

En nou word nie net die breedte beperk nie, maar ook die hoogte (die teks sal oor die blok uitsteek en by hoogte):

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

Voorbeeld . Waarde hidden

Nou sal alles wat oor die houer se grense uitsteek eenvoudig afgesny word (ook by hoogte). Let op dat afsny by hoogte slegs gebeur wanneer dit eksplisiet gespesifiseer is. Andersins brei die teks die houer se hoogte uit - en daar sal geen afsny plaasvind nie:

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

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

Voorbeeld . Waarde scroll

Met die waarde scroll sal rolbalke altyd wees, selfs al steek niks uit nie (in hierdie geval sal hulle onaktief wees). Nou steek die teks nie uit nie, nóg by breedte, nóg by hoogte, maar daar is steeds rolbalke (onaktief):

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

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

Voorbeeld . Waarde auto

Met die waarde auto word rolbalke slegs bygevoeg as die inhoud oor die houer uitsteek. Nou is hulle nie daar nie, aangesien alles binne pas:

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

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

Voorbeeld . Waarde auto

En nou beperk ons die breedte - 'n horisontale rolbalk sal verskyn:

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

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

Kyk ook

die eienskap word-break,
wat letters van 'n lang woord na 'n nuwe reël oorbring
die eienskap overflow-wrap,
wat letters van 'n lang woord na 'n nuwe reël oorbring
die eienskap overflow-x,
wat uitstekende dele in die horisontale rigting afsny
die eienskap overflow-y,
wat uitstekende dele in die vertikale rigting afsny