De eigenschap witruimte bepaalt hoe tekst wordt verwerkt op het element waarop het wordt toegepast. Stel dat u HTML precies zo heeft:
A bunch of words you see. Je hebt de div zo gestileerd dat hij een vaste breedte van 100 px heeft. Bij een redelijke lettergrootte is dat te veel tekst om in 100px te passen. Zonder iets te doen, de standaard white-spacewaarde is normal, en de tekst zal verpakken. Zie onderstaand voorbeeld of volg thuis de demo.
div ( /* This is the default, you don't need to explicitly declare it unless overriding another declaration */ white-space: normal; )
Als u wilt voorkomen dat de tekst omloopt, kunt u een aanvraag indienen white-space: nowrap;
Merk op dat in het HTML-codevoorbeeld bovenaan dit artikel eigenlijk twee regeleinden zijn, één voor de regel tekst en één erna, waardoor de tekst op een eigen regel (in de code) kan staan. Wanneer de tekst in de browser wordt weergegeven, verschijnen die regeleinden alsof ze zijn verwijderd. Ook zijn de extra spaties op de regel vóór de eerste letter verwijderd. Als we de browser willen dwingen die regeleinden en extra witruimtetekens weer te geven, kunnen we deze gebruikenwhite-space: pre;
Het wordt genoemd preomdat het gedrag is alsof u de tekst erin had verpakt
Misschien vind je het leuk hoe prewitruimte en onderbrekingen worden gerespecteerd, maar je moet de tekst laten teruglopen in plaats van mogelijk uit de bovenliggende container te breken. Dat is wat white-space: pre-wrap;is voor:
Ten slotte white-space: pre-line;worden regels afgebroken waar ze code inbreken, maar er wordt nog steeds extra witruimte verwijderd.
Interessant is dat het laatste regeleinde niet wordt gehonoreerd. Volgens de CSS 2.1-specificatie: "Regels worden onderbroken bij behouden tekens voor nieuwe regels en indien nodig om regelvakken te vullen." dus misschien is dat logisch.
Hier is een tabel om het gedrag van alle verschillende waarden te begrijpen:
| Nieuwe lijnen | Spaties en tabbladen | Tekstterugloop | |
|---|---|---|---|
| normaal | Ineenstorting | Ineenstorting | Wikkelen |
| pre | Behouden | Behouden | Geen omslag |
| nowrap | Ineenstorting | Ineenstorting | Geen omslag |
| voorverpakken | Behouden | Behouden | Wikkelen |
| pre-line | Behouden | Ineenstorting | Wikkelen |
In CSS3 gaat de white-spaceeigenschap letterlijk die grafiek volgen en de eigenschappen toewijzen aan text-space-collapseen text-wrapdienovereenkomstig.
Meer informatie
- Mozilla Docs
Browser-ondersteuning
Iets ingewikkelder dan de reguliere ondersteuningstabel, aangezien elke waarde verschillende ondersteuningsniveaus heeft:
| Browser | Versie | Ondersteuning van |
|---|---|---|
| Internet Explorer | 5.5 | normal | nowrap |
| 6.0 | normal | pre | nowrap |
|
| 8+ | normal | pre | nowrap | pre-wrap | pre-line |
|
| Firefox (gekko) | 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 |
|
| Opera | 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 |