White-space

CSS vlastnost white-space určuje způsob práce s řádkovými zlomy v HTML.

white-space
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.

Podpora

Podpora vlastnosti white-space
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í.

Příklady

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>

Příklad na pre-wrap

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 */}

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB

o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.