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. Zalomí se ale tam, kde bude <br> nebo jiný blokový prvek.
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. Musí tam ale být mezera nebo jiný znak, který může normálně vést k zalomení.
pre-line Skoro totéž, co normal, ale všechny konce řádků ze zdroje se přenesou i do zobrazení stránky.

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.

V minulosti jsem na této stránce nesprávně uváděl, že pre-wrap umí zalomit řádek i tehdy, když tento řádek neobsahuje žádné místo vhodné ke zlomu (typicky mezeru). To nebyla pravda. Takovou funkci zvládá overflow-wrap a word-wrap: break-word.

Tab-size

Kdo má v kódu hodně tabulátorů a nechce nechávat na prohlížeči, jak je různě rozhází, může nastavit, jak dlouhý tabulátor má být. Týká se to situací, kdy je kód formátovaný jako white-space: wrap; nebo white-space: pre-wrap. Kdo chce mít tabulátor široký 4 znaky, napíše

tab-size: 4;

což by se mělo interpretovat jako čtyřnásobek šířky běžného znaku písma. To je snadné určit u neproporciálního písma, u jiného písma těžko říct. Kromě číselných jednotek, které se interpretují jako násobky, se dá za tab-size zadat i normální hodnta.

Podpora

Vlastnosti pre-wrap a pre-line jsou relativně novější, takže lze předpokládat horší podporu, ale nemám už žádný prohlížeč, který by jim nerozuměl.

Podpora vlastnosti white-space
Prohlížeč Podpora ve verzích Poznámka
Internet Explorer nevím, ale 11 podporuje vše  
Mozilla (Firefox, Netscape 6+ atd.) všechny verze  
Chrome, Opera, Safari ano  

S podporou tab-size je to složitější, ale já ji zatím nepotřeboval.

Podpora vlastnosti tab-size
Prohlížeč Podpora ve verzích Poznámka
Internet Explorer nikde  
Mozilla (Firefox, Netscape 6+ atd.) pouze jako -moz-tab-size od verze 53 umí i délkové jednotky
Chrome, Opera, Safari všechny verze  

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>

Zobrazit tento příklad na white-space: pre.

Rozdíl je v tom, že white-space: pre pro zobrazení potřebuje striktní doctype. Další rozdíl je v tom, že tag <pre> použije automaticky písmo se stejnou šířkou znaků, kdežto white-space: pre; nechá aktuální font.

Dalo by se to nastavit pomocí font-family:

<style>
.vystup {white-space: pre; font-family: monotype}
</style>

 

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.