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.