Lekce 20 - Přetékání obsahu v CSS3
V minulé lekci, Plovoucí obsah v CSS3, jsme se zabývali nastavování plovoucího obsahu.
V tomto článku se podíváme na vlastnost overflow
, kterou se
nastavuje chování obsahu, který přetéká přes
okraje prvku, a na speciální nastavení přetékání v
horizontálním (overflow-x
) či
vertikálním (overflow-y
) směru.
Overflow
Pomocí CSS3 vlastnosti overflow
nastavujeme chování
HTML elementu v případě, že jeho obsah přeteče rozměry
elementu. Takto "vyteklý" obsah lze oříznout,
nechat vidět nebo umístit do elementu
scrollbar.
Hodnoty
- visible (výchozí) - Vyteklý obsah je vykreslen mimo hranice elementu.
- hidden - Obsah je oříznutý tak, aby se vešel do elementu. Co se nevešlo, není zobrazeno.
- scroll - Elementu je přidán scrollbar tak, aby bylo možné zobrazit celý jeho obsah. Scrollbar je přidán vždy a na obě strany elementu.
- auto - Scrollbar je přidán elementu pouze v případě, že se obsah do elementu nevejde.
- inherit - Vlastnost
overflow
bude zděděna od rodičovského elementu.
Ukázka
Vytvořme menší element, než bude jeho obsah, a necháme ho vytéct:
#kontejner { overflow: visible; width: 300px; height: 100px; border: 1px solid blue; }
Důležité je nastavit šířku/výšku kontejneru. V defaultním nastavení se div automaticky zvětšuje, pokud nemá specifikovanou žádnou velikost. Naše HTML bude takové:
<div id="kontejner"> <img src="ptaci.png" alt="Ptáci" style="float: left;" /> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>
Výsledek:
Nyní nechme vyteklý obsah oříznout pomocí hodnoty
hidden
:
overflow: hidden;
Výsledek:
Vyzkoušejme ještě hodnotu auto
:
overflow: auto;
Výsledek:
Overflow-x a overflow-y
Pomocí CSS3 vlastností overflow-x
a overflow-y
nastavujeme chování HTML elementu v případě, že jeho obsah přeteče
šířku (u overflow-x
) nebo
výšku (u overflow-y
) elementu. Takto můžeme
obsah opět skrýt, nechat přetéct nebo
elementu vytvořit scrollbar, a to pomocí stejných
klíčových slov jako výše u prostého
overflow
.
Ukázka overflow-x
Vytvořme si element <div
> s rozměry
200px
×150px
a modrým, plným rámečkem
(border
) o šířce 1px
. Do tohoto divu
umístíme odstavec s šířkou 300px
a textem
Lorem ipsum
, který necháme přetékat:
div { overflow-x: visible; width: 200px; height: 150px; border: 1px solid #0079db; /* modrá barva */ } p { width: 300px; }
HTML:
<div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>
Výsledek:
Obdobně si můžeme vyzkoušet overflow-y
, ovšem tentokrát
necháme přetékající obsah skrýt pomocí atributu
hidden
(povšimněme si přitom, že nenastavený
overflow-x
se bude počítat jako auto
):
div { overflow-x: hidden; width: 200px; height: 150px; border: 1px solid #0079db; /* modrá barva */ } p { width: 300px; }
Výsledek:
V příští lekci, Nastavitelná velikost a ořezávání prvků v CSS3, se podíváme na změny velikosti prvku uživatelem a na úpravy viditelné oblasti prvku na stránce.