Atribuut white-space

Atribuut white-space määrab kuidas teksti uuele reale üle kanda, samuti kuidas kuvada tühikuid sõnade vahel ja reavahetusi (kohad, kus koodi sisestamisel vajutati Enter).

Süntaks

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

Väärtused

Väärtus	Kirjeldus
`nowrap`	Keelab tekstil üle kanda teisele reale, isegi kui see ei mahu konteineri laiusesse (sel juhul lihtsalt ulatub tekst selle piiridest kaugemale). Siiski, märgi `br` lisamine paneb teksti uuele reale üle kandma.
`pre`	Tekst kuvatakse nii, nagu see oli sisestatud veebisaadi koodi redaktoris: koos kõigi tühikute ja enteritega (kui koodis on sisestatud mitu tühikut, kuvatakse ekraanil samuti mitu). Samal ajal brauser ei too teksti uuele reale, kui see ei mahu konteinerisse - tekst lihtsalt ulatub selle piiridest kaugemale. Märgi pre analoog, kuid erinevalt sellest ei muuda fonti monospace-iks (monospace fondi kohta vaata atribuuti `font-family`.
`pre-wrap`	Sama, mis pre, erinevus on selles, et kui tekst on liiga pikk ega mahu konteinerisse - brauser kannab selle teisele reale.
`pre-line`	Brauser võtab arvesse ainult HTML-koodis olevaid Entereid ja ignoreerib kõike muud (mitu tühikut kuvatakse ekraanil ühe tühikuna, brauser paigutab rea murdmiskohad ise).
`normal`	Standardne käitumine: brauser paigutab rea murdmiskohad ise nii, et sõnad mahuksid konteinerisse. Mitu tühikut koodis kuvatakse ekraanil ühe tühikuna.

Vaikeväärtus: normal.

Näide . Väärtus nowrap

Selles näites tekst ei mahu konteinerisse ja ulatub selle piiridest kaugemale, kuna on määratud väärtus nowrap:

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

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

Näide . Väärtus nowrap ja märk br

Kui lisada märk br - kantakse tekst üle uuele reale (täpselt kohas, kus asub br):

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

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

Näide . Väärtus pre

Selles näites kuvatakse tekst nii, nagu see oli sisestatud HTML-koodi redaktoris (koos kõigi klahviga Tab tehtud taandetega, Enter-itega jne ):

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

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

Näide . Väärtus pre-wrap

Nüüd kuvatakse tekst nii, nagu see oli sisestatud HTML-koodi redaktoris, kuid väljaulatuvaid osasid kantakse uuele reale:

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

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

Vaata ka

atribuudid word-break ja overflow-wrap,
mis võimaldavad pika sõna tähti uuele reale kanda
atribuut tab-size,
mis määrab klahviga Tab tehtud taande suuruse
atribuut hyphens,
mis lubab sõnade poolitamist silpide kaupa
atribuut overflow,
mis lõikab ära ploki piiridest välja ulatuvaid osi
märk pre,
mis kuvab teksti nii, nagu see oli sisestatud HTML-koodi redaktoris