Savybė white-space

Savybė white-space nustato kaip perkelti tekstą į naują eilutę, taip pat kaip rodyti tarpus tarp žodžių ir eilučių lūžius (vietas, kur buvo paspaustas Enter kodu rašant).

Sintaksė

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

Reikšmės

Reikšmė	Aprašas
`nowrap`	Uždraudžia tekstui persikelti į kitą eilutę, net jei jis netelpa į konteinerio plotį (tokiu atveju tekstas tiesiog išeis už jo ribų). Tačiau, pridėjus žymą `br` privers tekstą persikelti į naują eilutę.
`pre`	Tekstas rodomas taip, kaip buvo įvestas redaktoriuje kurdant svetainę: su visais tarpais ir enter-iais (jei kode įvesti keli tarpai - ekrane taip pat bus keli). Tuo pačiu naršyklė neperkels teksto į naują eilutę, jei jis netelpa į konteinerį - tekstas tiesiog išeis už jo ribų. Analogas žymos pre, bet skirtingai nuo jos nekeičia šrifto į monospace (apie monospace šriftą žr. savybę `font-family`.
`pre-wrap`	Tas pats, kas ir pre, skirtumas tas, kad jei tekstas per ilgas ir netelpa į konteinerį - naršyklė jį perkels į kitą eilutę.
`pre-line`	Naršyklė atsižvelgia tik į Enter-ius HTML kode ir ignoruoja visa kita (keli tarpai atrodys kaip vienas, naršyklė pati nustato eilučių lūžius).
`normal`	Standartinis elgesys: naršyklė pati nustato eilučių lūžius taip, kad žodžiai tilptų į konteinerį. Keli tarpai kode atrodys kaip vienas ekrane.

Reikšmė pagal nutylėjimą: normal.

Pavyzdys . Reikšmė nowrap

Šiame pavyzdyje tekstas netilps į konteinerį ir išeis už jo ribų, nes nustatyta reikšmė nowrap:

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

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

Pavyzdys . Reikšmė nowrap ir žyma br

Jei pridėsite žymą br - tekstas persikels į naują eilutę (būtent toje vietoje, kur yra br):

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

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

Pavyzdys . Reikšmė pre

Šiame pavyzdyje tekstas rodomas taip, kaip buvo įvestas HTML kodo redaktoriuje (su visais atitraukimais klavišu Tab, su Enter ir taip toliau):

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

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

Pavyzdys . Reikšmė pre-wrap

O dabar tekstas rodomas taip, kaip buvo įvestas HTML kodo redaktoriuje, tačiau, išeinantys dalys perkeliami į naują eilutę:

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

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

Taip pat žiūrėkite

savybės word-break ir overflow-wrap,
kurios leidžia perkelti ilgo žodžio raides į naują eilutę
savybė tab-size,
kuri nustato atitraukimo, sukurtą klavišu Tab, dydį
savybė hyphens,
kuri įjungia žodžių perkėlimą skiemenimis
savybė overflow,
kuri nukirpą išeinančias už bloko ribų dalis
žyma pre,
kuri rodo tekstą taip, kaip jis buvo įvestas HTML kodo redaktoriuje