Die overflow-wrap Eienskap

Die overflow-wrap eienskap laat toe dat die letters van 'n lang woord na 'n nuwe reël oorgedra word, as daardie woord nie in die houer se wydte pas nie.

Sintaksis

selektor {
	overflow-wrap: break-word | normal;
}

Waardes

Waarde	Beskrywing
`break-word`	Dwing lang woorde om na 'n nuwe reël oor te dra, as die woord nie in die houer pas nie. Terselfdertyd sal die woord op 'n nuwe reël begin.
`normal`	Standaard gedrag: as 'n lang woord nie in die houer se wydte pas nie - sal dit eenvoudig uitsteek oor sy grens (en sal terselfdertyd op 'n nuwe reël begin).

Standaardwaarde: normal.

Voorbeeld . Waarde normal

In hierdie voorbeeld sal 'n baie lang woord nie pas in die houer nie en sal oor sy grense uitsteek (en sal terselfdertyd op 'n nuwe reël begin):

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

#elem {
	word-wrap: normal;
	overflow-wrap: normal;
	border: 1px solid red;
	width: 200px;
}

Voorbeeld . Waarde break-word

En nou sal daardie letters wat nie gepas het nie, eenvoudig na die volgende reël oorgedra word (en sal die lang woord steeds op 'n nuwe reël begin):

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

#elem {
	overflow-wrap: break-word;
	border: 1px solid red;
	width: 200px;
}

Sien ook

die word-break eienskap,
wat ook toelaat dat die letters van 'n lang woord na 'n nuwe reël oorgedra word
die word-wrap eienskap,
wat die verouderde naam vir die overflow-wrap eienskap is
die hyphens eienskap,
wat woordafbreking volgens lettergrepe aanskakel
die wbr etiket,
wat sagte afbrekings deur middel van HTML implementeer
die br etiket,
waarmee jy die teks kan dwing om na 'n nuwe reël oor te dra