dodání ihned! nové
Hledáme programátora do rostoucího týmu ITnetwork.cz, 100% home office, 100 flexibilní pracovní doba. Více informací
Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
BF

Lekce 24 - Přetékání obsahu v CSS 3

V minulé lekci, Plovoucí obsah v CSS 3, 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í CSS 3 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:

Overflow: visible
index.html
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Nyní nechme vyteklý obsah oříznout pomocí hodnoty hidden:

overflow: hidden;

Výsledek:

Overflow: hidden
index.html

Vyzkoušejme ještě hodnotu auto:

overflow: auto;

Výsledek:

Overflow: auto
index.html

Overflow-x a overflow-y

Pomocí CSS 3 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:

Overflow-x: visible
index.html

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:

Overflow-x: visible
index.html

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.


 

Předchozí článek
Plovoucí obsah v CSS 3
Všechny články v sekci
CSS3 od A do Z
Přeskočit článek
(nedoporučujeme)
Nastavitelná velikost a ořezávání prvků v CSS3
Článek pro vás napsal Jakub Raida
Avatar
Uživatelské hodnocení:
2 hlasů
Autor má rád literaturu, dějiny, filmy, počítačové hry, paleontologii, vesmír a programování.
Aktivity

 

 

Komentáře

Avatar
Michael Stanovský:10. října 3:05

Super, díky, sice už mám něco za sebou, ale vždycky se tady něco nového dozvím. I v penzi se programátor musí vzdělávat.

Odpovědět
10. října 3:05
Programátor dělá co umí, počítač si dělá co chce.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 1 zpráv z 1.