White-space
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. 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. |
| break-spaces | Podobné jako hodnota pre-wrap, ale nějak se liší v zalomení mezer, nepochopil jsem rozdíl. |
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.
| 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.
| 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 |
Nedělitelná mezera namísto nowrap
Na tomhle místě, když probíráme nowrap, je důležité zmínit existenci nedělitelné mezery. Je to druh mezery mezi slovy, která se sice zobrazuje jako mezera, ale prohlížeč ví, že ma místo této mezery nesmí zalomit slovo na nový řádek. Normální mezera (a každý bílý znak v HTML kódu) se chová tak, že kdyby se další slovo na řádek nevešlo, tak se namísto zobrazení mezery zalomí řádek. Ne tak v případě nedělitelné mezery - u ní se zalomit slovo na další řádek nesmí.
Nedělitelná mezera se dělá html entitou . Z anglického Non Breaking SPace.
příklad:
tento text se nezalomí
ale tenhle text se může zalomit kdekoli
V mnoha případech je použití entity mezi slovy praktičtější, než se pokoušet o nějaká kouzla s CSS nebo tagy. Ve wysiwyg editorech se nedělitelná mezera dělá obvykle klávesovou zkratkou Ctrl + Shift + mezera.
-webkit-nbsp-mode: space je proprietální CSS vlastnost fungující v Chrome a Safari. Způsobí, že se řádek může zalomit i v místě, kde je .
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
