Eienskap white-space

Die eienskap white-space stel vas hoe om teks na 'n nuwe reël oor te plaas, sowel as hoe om spasies tussen woorde en reëlbreuke (plekke waar Enter gedruk is tydens die opstel van die kode) te vertoon.

Sintaksis

selekteerder {
	white-space: nowrap | pre | pre-line | pre-wrap | normal;
}

Waardes

Waarde	Beskrywing
`nowrap`	Verbied teks om na 'n ander reël oor te plaas, selfs as dit nie pas nie in die breedte van die houer (in hierdie geval sal die teks eenvoudig oor sy grense uitsteek). Die byvoeging van die etiket `br` sal die teks egter dwing om na 'n nuwe reël oor te plaas.
`pre`	Teks word gewys soos dit in die teksverwerker getik is tydens die opstel van die webwerf: met alle spasies en enter-aane (as daar verskeie spasies in die kode getik is - sal daar ook verskeie op die skerm wees). Terselfdertyd sal die leser nie die teks na 'n nuwe reël oordra nie, as dit nie pas in die houer nie - die teks sal eenvoudig oor sy grense uitsteek. Ekwiwalent van die pre-etiket, maar anders as dit, verander dit nie die lettertipe na monospasie nie (vir monospasie-lettertipe, sien eienskap `font-family`.
`pre-wrap`	Dieselfde as pre, die verskil is dat as die teks te lank is en nie in die houer pas nie - sal die leser dit na 'n ander reël oordra.
`pre-line`	Die leser neem slegs Enter-aane in die HTML-kode in ag en ignoreer al die ander (verskeie spasies sal as een lyk, die leser plaas self reëlbreuke).
`normal`	Standaard gedrag: die leser plaas self reëlbreuke sodat die woorde in die houer pas. Verskeie spasies in die kode sal lyk as een op die skerm.

Standaardwaarde: normal.

Voorbeeld . Waarde nowrap

In hierdie voorbeeld sal die teks nie in die houer pas nie en sal oor sy grense uitsteek, aangesien die waarde nowrap gestel is:

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

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

Voorbeeld . Waarde nowrap en br-etiket

As jy die etiket br byvoeg - sal die teks oorgeplaas word na 'n nuwe reël (presies op die plek waar br staan):

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

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

Voorbeeld . Waarde pre

In hierdie voorbeeld word die teks gewys soos dit in die HTML-kode-redakteur getik is (met alle inkepings deur die Tab-sleutel, met Enter en so aan):

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

#elem {
	width: 200px;
	white-space: pre;
	border: 1px solid red;
}

Voorbeeld . Waarde pre-wrap

En nou word die teks gewys soos dit in die HTML-kode-redakteur getik is, maar, uitstekende gedeeltes word na 'n nuwe reël oorgeplaas:

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

#elem {
	width: 200px;
	white-space: pre-wrap;
	border: 1px solid red;
}

Sien ook

eienskappe word-break en overflow-wrap,
wat toelaat om letters van 'n lang woord na 'n nuwe reël oor te plaas
eienskap tab-size,
wat die grootte van die inkeping, geskep deur die Tab-sleutel, vasstel
eienskap hyphens,
wat woordoorplasings per lettergrepe aanskakel
eienskap overflow,
wat uitstekende gedeeltes oor die blok se grens afsny
etiket pre,
wat teks wys soos dit in die HTML-kode-redakteur getik is