White-space-ominaisuus

Ominaisuus white-space määrittää kuinka teksti katkeaa uudelle riville, sekä kuinka sanavälit ja rivinvaihdot (paikat, joissa Enter on painettu koodia kirjoitettaessa) näytetään.

Syntaksi

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

Arvot

Arvo	Kuvaus
`nowrap`	Kieltää tekstin katkeamasta toiselle riville, vaikka se ei mahtuisi säiliön leveyteen (tässä tapauksessa tekstistä tulee vain ulos sen rajojen ulkopuolelle). Kuitenkin, `br`-tagin lisääminen pakottaa tekstin siirtymään uudelle riville.
`pre`	Teksti näytetään niin kuin se on kirjoitettu sivuston koodausta varten käytetyssä editorissa: kaikkine välilyönteineen ja enter-painalluksineen (jos koodissa on useita välilyöntejä peräkkäin - näytöllä on myös useita). Tässä tapauksessa selain ei katkaise tekstiä uudelle riville, jos se ei mahdu säiliöön - tekstistä tulee vain ulos sen rajojen ulkopuolelle. Vastine pre-tagille, mutta toisin kuin se, ei muuta fonttia tasalevyiseksi (tasalevyisistä fonteista ks. ominaisuus `font-family`.
`pre-wrap`	Sama kuin pre, erona se, että jos teksti on liian pitkä eikä mahdu säiliöön - selain katkaisee sen toiselle riville.
`pre-line`	Selain ottaa huomioon vain Enter-painallukset HTML-koodissa ja jättää huomiotta kaiken muun (useat peräkkäiset välilyönnit näyttävät yhdeltä, selain asettaa rivinvaihdot automaattisesti).
`normal`	Vakio käyttäytyminen: selain asettaa rivinvaihdot automaattisesti siten, että sanat mahtuvat säiliöön. Useat peräkkäiset välilyönnit koodissa näkyvät yhtenä välilyöntinä näytöllä.

Oletusarvo: normal.

Esimerkki . Nowrap-arvo

Tässä esimerkissä teksti ei mahdu säiliöön ja tulee ulos sen rajojen ulkopuolelle, koska on asetettu arvo nowrap:

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

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

Esimerkki . Nowrap-arvo ja br-tagi

Jos lisätään br-tagi - teksti siirtyy uudelle riville (tarkalleen siinä paikassa, jossa br on):

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

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

Esimerkki . Pre-arvo

Tässä esimerkissä teksti näytetään niin, kuin se on kirjoitettu HTML-koodin editorissa (kaikkine sarkainvälilyönteineen Tab-näppäimellä, Enter-painalluksineen jne.):

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

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

Esimerkki . Pre-wrap-arvo

Nyt teksti näytetään niin, kuin se on kirjoitettu HTML-koodin editorissa, kuitenkin, ulos tulevat osat siirretään uudelle riville:

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

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

Katso myös

ominaisuudet word-break ja overflow-wrap,
jotka mahdollistavat pitkän sanan kirjainten siirtämisen uudelle riville
ominaisuus tab-size,
joka asettaa Tab-näppäimen luoman sisennyksen koon
ominaisuus hyphens,
joka ottaa käyttöön tavutusten mukaisen sanan katkaisun
ominaisuus overflow,
joka leikkaa säiliön rajojen ulkopuolelle tulevat osat
tagi pre,
joka näyttää tekstin niin kuin se on kirjoitettu HTML-koodin editorissa