Īpašība white-space

Īpašība white-space nosaka, kā pārnest tekstu jaunā rindā, kā arī kā attēlot atstarpes starp vārdiem un rindu pārtraukumus (vietas, kurās tika nospiesta Enter taustiņš, rakstot kodu).

Sintakse

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

Vērtības

Vērtība	Apraksts
`nowrap`	Aizliedz tekstam pārnesties uz citu rindu, pat ja tas neietilpst konteinera platībā (šajā gadījumā teksts vienkārši izies ārpus tā robežām). Tomēr, pievienojot tagu `br` panāks, ka teksts tiks pārnests jaunā rindā.
`pre`	Teksts tiek rādīts tā, kā tas tika ierakstīts teksta redaktorā, veidojot vietni: ar visām atstarpēm un enter taustiņiem (ja kodā ir vairākas atstarpes - ekrānā arī būs vairākas). Šajā gadījumā pārlūkprogramma nepārnems tekstu jaunā rindā, ja tas neietilpst konteinerā - teksts vienkārši izies ārpus tā robežām. < a href="/lv/markup/manual/html/tag/pre/">pre taga analogs, bet atšķirībā no tā nemaina fontu uz monospace fontu (par monospace fontu skatīt īpašību `font-family`.
`pre-wrap`	Tas pats, kas pre, atšķirība ir tā, ka, ja teksts pārāk garš un neietilpst konteinerā - pārlūkprogramma to pārnels uz citu rindu.
`pre-line`	Pārlūkprogramma ņem vērā tikai Enter taustiņus HTML kodā un ignorē visu pārējo (vairākas atstarpes tiks rādītas kā viena, pārlūkprogramma pati nosaka rindu pārtraukumus).
`normal`	Standarta uzvedība: pārlūkprogramma pati nosaka rindu pārtraukumus tā, lai vārdi ietilptu konteinerā. Vairākas atstarpes kodā tiks rādītas kā viena ekrānā.

Noklusējuma vērtība: normal.

Piemērs . Vērtība nowrap

Šajā piemērā teksts neietilps konteinerā un izies ārpus tā robežām, jo ir iestatīta vērtība nowrap:

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

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

Piemērs . Vērtība nowrap un br tags

Ja pievieno tagu br - teksts tiks pārnests jaunā rindā (tieši tajā vietā, kur atrodas br):

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

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

Piemērs . Vērtība pre

Šajā piemērā teksts tiek rādīts tā, kā tas tika ierakstīts HTML koda redaktorā (ar visiem atkāpēm, izmantojot Tab taustiņu, ar Enter taustiņu un tā tālāk):

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

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

Piemērs . Vērtība pre-wrap

Bet šoreiz teksts tiek rādīts tā, kā tas tika ierakstīts HTML koda redaktorā, tomēr, daļas, kas iziet ārā, tiek pārnestas jaunā rindā:

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

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

Skatiet arī

īpašības word-break un overflow-wrap,
kas ļauj pārnest gara vārda burtus jaunā rindā
īpašība tab-size,
kas nosaka atkāpes izmēru, ko rada Tab taustiņš
īpašība hyphens,
kas ieslēdz vārdu pārnesešanu pa zilbēm
īpašība overflow,
kas apgriež ārpus bloka robežām iziešošās daļas
tags pre,
kas rāda tekstu tā, kā tas tika ierakstīts HTML koda redaktorā