Lastnost white-space

Lastnost white-space določa, kako prelomiti besedilo v novo vrstico, pa tudi kako prikazati presledke med besedami in prelome vrstic (mesta, kjer je bil pritisnjen Enter pri vnosu kode).

Sintaksa

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

Vrednosti

Vrednost	Opis
`nowrap`	Prepoveduje besedilu prelom v drugo vrstico, tudi če se ne prilega v širino vsebnika (v tem primeru bo besedilo preprosto šlo čez njegove meje). Vendar bo dodajanje oznake `br` povzročilo, da se besedilo prelomi v novo vrstico.
`pre`	Besedilo je prikazano tako, kot je bilo vnešeno v urejevalniku pri oblikovanju spletnega mesta: z vsemi presledki in enterji (če je v kodi vnešenih več presledkov - na zaslonu bo tudi več). V tem primeru brskalnik ne bo prelomil besedila v novo vrstico, če se ne prilega v vsebnik - besedilo bo preprosto šlo čez njegove meje. Analog oznake pre, vendar za razliko od nje ne spreminja pisave na monospace (o monospace pisavi glej lastnost `font-family`.
`pre-wrap`	Isto kot pre, razlika je v tem, da če je besedilo preveč dolgo in se ne prilega v vsebnik - brskalnik ga bo prelomil v drugo vrstico.
`pre-line`	Brskalnik upošteva samo Enterje v HTML kodi in ignorira vse ostalo (več presledkov bo videti kot en, brskalnik sam postavlja prelome vrstic).
`normal`	Standardno obnašanje: brskalnik sam postavlja prelome vrstic tako, da se besede prilegajo v vsebnik. Več presledkov v kodi bo videti kot en na zaslonu.

Privzeta vrednost: normal.

Primer . Vrednost nowrap

V tem primeru se besedilo ne bo prileglo v vsebnik in bo šlo čez njegove meje, ker je nastavljena vrednost nowrap:

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

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

Primer . Vrednost nowrap in oznaka br

Če dodamo oznako br - se bo besedilo prelomilo v novo vrstico (točno na mestu, kjer stoji br):

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

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

Primer . Vrednost pre

V tem primeru je besedilo prikazano tako, kot je bilo vnešeno v urejevalniku HTML kode (z vsesemi odmiki s tipko Tab, z Enter in tako naprej):

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

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

Primer . Vrednost pre-wrap

Tukaj je besedilo prikazano tako, kot je bilo vnešeno v urejevalniku HTML kode, vendar se deli, ki segajo čez meje, prelomijo v novo vrstico:

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

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

Glejte tudi

lastnosti word-break in overflow-wrap,
ki omogočata prelom črk dolge besede v novo vrstico
lastnost tab-size,
ki določa velikost odmika, ustvarjenega s tipko Tab
lastnost hyphens,
ki vklopi deljenje besed po zlogih
lastnost overflow,
ki obreže dele, ki segajo čez mejo bloka
oznaka pre,
ki prikaže besedilo tako, kot je bilo vnešeno v urejevalniku HTML kode