Proprietatea de spațiu alb controlează modul în care textul este tratat pe elementul la care este aplicat. Să presupunem că aveți HTML exact așa:
A bunch of words you see. Ați conceput div ca să aibă o lățime setată de 100 px. La o dimensiune rezonabilă a fontului, este prea mult text pentru a se potrivi în 100 px. Fără a face nimic, white-spacevaloarea implicită este normal, iar textul se va încheia. Vedeți exemplul de mai jos sau urmați acasă cu demonstrația.
div ( /* This is the default, you don't need to explicitly declare it unless overriding another declaration */ white-space: normal; )
Dacă doriți să împiedicați ambalarea textului, puteți aplica white-space: nowrap;
Observați, în exemplul de cod HTML din partea de sus a acestui articol, există de fapt două pauze de linie, una înainte de linia de text și una după aceea, care permit textului să fie pe propria linie (în cod). Când textul se redă în browser, acele întreruperi de linie apar ca și cum ar fi eliminate. De asemenea, sunt eliminate spațiile suplimentare de pe linie înainte de prima literă. Dacă vrem să forțăm browserul să afișeze acele pauze de linie și caractere de spațiu alb suplimentare, le putem folosiwhite-space: pre;
Se numește prepentru că comportamentul este ca și cum ai fi înfășurat textul în
Poate vă place modul în care preonorează spațiul alb și pauzele, dar aveți nevoie ca textul să fie înfășurat în loc de a ieși din containerul său părinte. Pentru asta white-space: pre-wrap;este:
În cele din urmă, white-space: pre-line;vor rupe liniile acolo unde se rup în cod, dar spațiul alb suplimentar este încă dezbrăcat.
Interesant este că pauza de linie finală nu este onorată. Conform specificațiilor CSS 2.1: „Liniile sunt întrerupte la caracterele newline conservate și, după cum este necesar, pentru a completa casetele de linie.” poate că asta are sens.
Iată un tabel pentru a înțelege comportamentele tuturor valorilor diferite:
| Linii noi | Spații și file | Împachetarea textului | |
|---|---|---|---|
| normal | Colaps | Colaps | Înfășurați |
| pre | Păstrați | Păstrați | Fără împachetare |
| nowrap | Colaps | Colaps | Fără împachetare |
| pre-împachetare | Păstrați | Păstrați | Înfășurați |
| pre-linie | Păstrați | Colaps | Înfășurați |
În CSS3, white-spaceproprietatea urmează literalmente acea diagramă și mapează proprietățile la text-space-collapseși în text-wrapconsecință.
Mai multe informatii
- Documente Mozilla
Suport pentru browser
Puțin mai complex decât tabelul de asistență obișnuit, deoarece fiecare valoare are niveluri diferite de suport:
| Browser | Versiune | Suportul |
|---|---|---|
| Internet Explorer | 5.5 | normal | nowrap |
| 6.0 | normal | pre | nowrap |
|
| 8+ | normal | pre | nowrap | pre-wrap | pre-line |
|
| Firefox (Gecko) | 1,0 (1,0) | normal | pre | nowrap | -moz-pre-wrap |
| 3.0 (1.9) | normal | pre | nowrap | pre-wrap | -moz-pre-wrap |
|
| 3.5 (1.9.1) | normal | pre | nowrap | pre-wrap | pre-line |
|
| Operă | 4.0 | normal | pre | nowrap |
| 8.0 | normal | pre | nowrap | pre-wrap |
|
| 9.5 | normal | pre | nowrap | pre-wrap | pre-line |
|
| Safari (WebKit) | 1,0 (85) | normal | pre | nowrap |
| 3,0 (522) | normal | pre | nowrap | pre-wrap | pre-line |