A white-space tulajdonság szabályozza, hogy a szöveg hogyan kezelje az elemet, amelyre alkalmazzák. Tegyük fel, hogy pontosan ilyen HTML-kóddal rendelkezik:
A bunch of words you see. Úgy alakította a div-t, hogy a beállított szélessége 100 képpont legyen. Megfelelő betűmérettel ez túl sok szöveg ahhoz, hogy elférjen 100 képpontban. Semmit nem téve az alapértelmezett white-spaceérték az normal, és a szöveg be fog burkolni. Lásd az alábbi példát, vagy kövesse otthon a bemutatóval.
div ( /* This is the default, you don't need to explicitly declare it unless overriding another declaration */ white-space: normal; )
Ha meg akarja akadályozni a szöveg burkolását, jelentkezhet white-space: nowrap;
Megjegyzés a cikk tetején található HTML-kód példában: valójában két sortörés van, egy a szöveg sora előtt, egy utána, amelyek lehetővé teszik, hogy a szöveg a saját sorában legyen (a kódban). Amikor a szöveg megjelenik a böngészőben, akkor ezek a sortörések úgy jelennek meg, mintha kihúznák őket. Szintén lecsupaszítják az extra betűket a soron az első betű előtt. Ha rá akarjuk kényszeríteni a böngészőt, hogy jelenítse meg azokat a sortöréseket és extra szóközöket, amelyeket használhatunkwhite-space: pre;
Azért hívják, premert az a viselkedés, mintha beburkolta volna a szöveget
Talán tetszik, hogyan pretiszteli meg a fehér helyet és törik, de a szöveget be kell tekerni, ahelyett, hogy esetleg kitörne a szülőtartályából. Ez az, ami white-space: pre-wrap;:
Végül white-space: pre-line;sorokat fog törni ott, ahol a kód megszakad, de az extra szóköz továbbra is megmarad.
Érdekes, hogy az utolsó sortörést nem tartják be. A CSS 2.1 specifikációja szerint: „A sorok meg vannak törve az új sor karaktereinél, és szükség esetén a sorok kitöltéséhez.” így talán ennek van értelme.
Itt található egy táblázat a különböző értékek viselkedésének megértéséhez:
| Új sorok | Szóközök és fülek | Szövegcsomagolás | |
|---|---|---|---|
| Normál | Összeomlás | Összeomlás | Betakar |
| elő | Megőrzés | Megőrzés | Nincs csomagolás |
| nowrap | Összeomlás | Összeomlás | Nincs csomagolás |
| előcsomagolás | Megőrzés | Megőrzés | Betakar |
| elővonal | Megőrzés | Összeomlás | Betakar |
A CSS3-ban a white-spacetulajdonság szó szerint követni fogja ezt a diagramot, és a tulajdonságokat text-space-collapseés text-wrapennek megfelelően feltérképezni .
Több információ
- Mozilla Docs
Böngésző támogatás
Kicsit bonyolultabb, mint a szokásos támogatási táblázat, mivel mindegyik értéknek más szintű támogatottsága van:
| Böngésző | Változat | Támogatása |
|---|---|---|
| internet böngésző | 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 |