CSS vlastnost white-space určuje způsob práce s řádkovými zlomy v HTML.
hodnoty | zacházení s bílými znaky |
---|---|
normal | skupiny bílých znaků v html zdroji jsou považovány za jednu mezeru, kde je potřeba, zalomí se řádek. Výchozí chování. |
pre | všechny mezery a bílé znaky ve zdroji jsou vykresleny v dokumentu. Řádky se lámou pouze tam, kde ve zdroji. |
nowrap | text nebude automaticky zalamován do okna prohlížeče, ale bude na jednom řádku |
pre-wrap | Je to skoro totéž, co hodnota pre, ale řádky se v textu můžou zalomit i tam, kde ve zdroji není nový řádek. Nepodporované, v Opeře je hodnota -pre-wrap |
pre-line | Skoro totéž, co normal, ale všechny konce řádků ze zdroje se přenesou i do zobrazení stránky. Nepodporované. |
V normálním HTML se skupiny bílých znaků (řádkové zlomy, tabulátory, mezery) považují za jednu mezeru a tak se také vykreslí do dokumentu. To odpovídá hodnotě white-space: normal, která je výchozí a není ji třeba zadávat.
Hodnota white-space: pre je obdobou zastaralého html tagu <pre>, který způsoboval vykreslení prvku do dokumentu přesně tak, jak je ve zdroji -- včetně bílých znaků. Používá se to zejména pro výpis různých zdrojových kódů, které už jsou zformátované mezerami a tabulátory.
Hodnota white-space: nowrap je obdobou zastaralého html tagu <nobr>. Funguje ale méně spolehlivě :-). Takový prvek nedovolí uvnitř sebe zalomit řádek, což se občas hodí v přesně vypočítaných designech.
White space znamená anglicky bílé místo. Vlastnost tedy popisuje, jak se má bílé místo v HTML zdroji přenést do vykreslení dokumentu.
Prohlížeč | Podpora ve verzích | Poznámka |
---|---|---|
Internet Explorer | všechny verze | |
Mozilla (Firefox, Netscape 6+ atd.) | všechny verze | |
Opera | 4, 5, 6, 7 | plus hodnota -pre-wrap |
Chrome | ano |
Nepotvrzená chyba Internet Exploreru: pokud nastavíte white-space: pre; řádkovému (inline) prvku, chová se celý vnější blokový prvek, jako by měl toto nastavení.
Zápis
<div style="white-space: pre">
120 koní
78 ovcí
34 psů
2 lidi
</div>
se zobrazí skoro stejně jako
<pre>
120 koní
78 ovcí
34 psů
2 lidi
</pre>
Rozdíl je v tom, že white-space: pre pro zobrazení potřebuje striktní doctype. Zobrazit tento příklad na white-space: pre.
Tag <pre> automaticky změní písmo na neproporcionální, kdežto white-space druh písma nemění. Dalo by se to nastavit pomocí font-family:
<style>
.vystup {white-space: pre; font-family: monotype}
</style>
Zatím nepodporovaná hodnota pre-wrap umožní zabránit elementu pre, aby příliš roztáhl stránku (když má dlouhý řádek zdroje bez řádkových zlomů). S malým hackem už to jde v Opeře:
pre { white-space: -pre-wrap;
/* Rozšíření pro Operu */
white-space: pre-wrap;
/* CSS 2.1 */}
Jak psát web píše Yuhů, Dušan Janovský. Kontakt.