Proprietatea white-space

Proprietatea white-space stabilește cum să se împartă textul pe o linie nouă, precum și cum să se afișeze spațiile dintre cuvinte și întreruperile de linie (locurile unde a fost apăsat Enter la introducerea codului).

Sintaxă

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

Valori

Valoare	Descriere
`nowrap`	Interzice textului să treacă pe o altă linie, chiar dacă nu încape în lățimea containerului (în acest caz, textul va ieși pur și simplu dincolo de granițele sale). Cu toate acestea, adăugarea tagului `br` va forța textul să treacă pe o linie nouă.
`pre`	Textul este afișat așa cum a fost introdus în editorul de text la crearea site-ului: cu toate spațiile și enter-urile (dacă în cod sunt introduse mai multe spații - pe ecran vor apărea tot mai multe). În acest caz, browserul nu va transfera textul pe o linie nouă, dacă nu încape în container - textul va ieși pur și simplu dincolo de granițele sale. Analogul tagului pre, dar spre deosebire de acesta, nu schimbă fontul în monospațiat (pentru fontul monospațiat, vezi proprietatea `font-family`.
`pre-wrap`	Același lucru ca și pre, diferența este că dacă textul este prea lung și nu încape în container - browserul îl va transfera pe o altă linie.
`pre-line`	Browserul ia în considerare doar Enter-urile din codul HTML și ignoră orice altceva (mai multe spații vor apărea ca unul singur, browserul stabilește singur întreruperile de linie).
`normal`	Comportamentul standard: browserul stabilește singur întreruperile de linie astfel încât cuvintele să încapă în container. Mai multe spații în cod vor apărea ca unul singur pe ecran.

Valoarea implicită: normal.

Exemplu . Valoarea nowrap

În acest exemplu, textul nu va încăpea în container și va ieși dincolo de granițele sale, deoarece este stabilită valoarea nowrap:

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

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

Exemplu . Valoarea nowrap și tagul br

Dacă se adaugă tagul br - textul se va transfera pe o linie nouă (exact în acel loc, unde se află br):

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

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

Exemplu . Valoarea pre

În acest exemplu, textul este afișat așa cum a fost introdus în editorul de cod HTML (cu toate indentările cu tasta Tab, cu Enter și așa mai departe):

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

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

Exemplu . Valoarea pre-wrap

Iar acum textul este afișat așa cum a fost introdus în editorul de cod HTML, totuși, părțile care ies în afara containerului sunt transferate pe o linie nouă:

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

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

Vezi și

proprietățile word-break și overflow-wrap,
care permit transferarea literelor unui cuvânt lung pe o linie nouă
proprietatea tab-size,
care stabilește dimensiunea indentării create de tasta Tab
proprietatea hyphens,
care activează despărțirea cuvintelor în silabe
proprietatea overflow,
care taie părțile care ies în afara limitei blocului
tagul pre,
care afișează textul așa cum a fost introdus în editorul de cod HTML