Egenskapen white-space kontrollerar hur text hanteras på det element som den används på. Låt oss säga att du har HTML exakt så här:
A bunch of words you see. Du har utformat div så att den har en inställd bredd på 100 pixlar. Med en rimlig teckensnittsstorlek är det för mycket text för att passa i 100 pixlar. Utan att göra något, standard white-spaceär värdet normal, och texten kommer att avsluta. Se exemplet nedan eller följ hemma med demo.
div ( /* This is the default, you don't need to explicitly declare it unless overriding another declaration */ white-space: normal; )
Om du vill förhindra att texten slår in kan du ansöka white-space: nowrap;
Lägg märke till i HTML-kodsexempel högst upp i den här artikeln, det finns faktiskt två radbrytningar, en före textraden och en efter, som gör att texten kan vara på sin egen rad (i koden). När texten återges i webbläsaren verkar dessa radbrytningar som om de är borttagna. De extra mellanslag på raden före första bokstaven är också borttagen. Om vi vill tvinga webbläsaren att visa dessa radbrytningar och extra vita tecken kan vi användawhite-space: pre;
Det kallas preför att beteendet är som om du hade lindat in texten
Du kanske gillar hur prehedrar det vita utrymmet och går sönder, men du behöver texten för att slås in istället för att eventuellt bryta ut ur den överordnade behållaren. Det är vad som white-space: pre-wrap;är till för:
Slutligen white-space: pre-line;kommer att bryta linjer där de bryter in kod, men extra vitt utrymme är fortfarande strippat.
Intressant är att den sista raden inte bryts. Enligt CSS 2.1-specifikationen: "Linjer bryts vid bevarade nylinjetecken och vid behov för att fylla radrutor." så kanske det är vettigt.
Här är en tabell för att förstå beteendet hos alla olika värden:
| Nya rader | Mellanrum och flikar | Textinpackning | |
|---|---|---|---|
| vanligt | Kollaps | Kollaps | Slå in |
| före | Bevara | Bevara | Ingen wrap |
| nowrap | Kollaps | Kollaps | Ingen wrap |
| förpackning | Bevara | Bevara | Slå in |
| pre-line | Bevara | Kollaps | Slå in |
I CSS3 kommer white-spaceegenskapen bokstavligen att följa det diagrammet och mappa fastigheterna till text-space-collapseoch därefter text-wrap.
Mer information
- Mozilla Docs
Webbläsarstöd
Lite mer komplicerat än den vanliga supporttabellen, eftersom varje värde har olika stödnivåer:
| Webbläsare | Version | Stöd för |
|---|---|---|
| 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 |
|
| 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 |