`white-space (nowrap, pre, pre-wrap, pre-line)` în CSS

Decide dacă spațiile și Enter-urile din text se păstrează și dacă textul trece singur pe rândul următor.

Sintaxă CSS

white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

Ce face `white-space (nowrap, pre, pre-wrap, pre-line)`

În mod normal browserul comprimă orice șir de spații și Enter-uri într-un singur spațiu și împarte textul pe rânduri după lățimea disponibilă. white-space schimbă aceste două comportamente.

nowrap ține textul pe un singur rând. pre păstrează exact spațiile și rândurile din sursă (ca <pre>), fără împărțire automată. pre-wrap păstrează spațiile și rândurile, dar împarte și rândurile prea lungi. pre-line păstrează doar Enter-urile și comprimă spațiile.

În CSS Text 4, white-space a devenit prescurtare pentru două proprietăți: white-space-collapse (ce se întâmplă cu spațiile) și text-wrap-mode (wrap sau nowrap). Valorile clasice funcționează în continuare în toate browserele.

Valori uzuale

Valoare	Descriere
`normal`	Comprimă spațiile, împarte rândurile automat (implicit).
`nowrap`	Comprimă spațiile, nu trece pe rândul următor.
`pre`	Păstrează spațiile și Enter-urile, nu împarte rândurile.
`pre-wrap`	Păstrează spațiile și Enter-urile, împarte rândurile prea lungi.
`pre-line`	Păstrează Enter-urile, comprimă spațiile, împarte rândurile.
`break-spaces`	Ca pre-wrap, dar spațiile de la final de rând ocupă loc și pot trece pe rândul următor.

Exemple

Exemplul 1: Mesaj scris de utilizator, cu rândurile lui

Textul dintr-un <textarea>, salvat și afișat apoi într-un <div>, își pierde Enter-urile fără pre-line sau pre-wrap.

.recenzie-text {
  white-space: pre-line;
}
/* Text salvat:
   "Mâncare foarte bună.
   Livrare rapidă în Cluj.
   Recomand!" */

Efect vizual în browser

Recenzia apare pe trei rânduri, exact cum a scris-o clientul, nu înghesuită într-un singur paragraf.

Exemplul 2: Preț și monedă care nu se despart

nowrap împiedică ruperea între număr și „lei” la capăt de rând.

.pret {
  white-space: nowrap;
}
/* <span class="pret">1 299,99 lei</span> */