24. diel - Pretekaniu obsahu v CSS 3

V minulej lekcii, Plávajúce obsah v CSS 3 , sme sa zaoberali nastavovanie plávajúceho obsahu.

V tomto článku sa pozrieme na vlastnosť overflow, ktorou sa nastavuje správanie obsahu, ktorý preteká cez okraje prvku, a na špeciálne nastavenia pretekaniu v horizontálnom (overflow-x) či vertikálnom (overflow-y) smere.

Overflow

Pomocou CSS 3 vlastnosti overflow nastavujeme správanie HTML elementu v prípade, že jeho obsah pretečie rozmery elementu. Takto "vytečený" obsah možno orezať, nechať vidieť alebo umiestniť do elementu scrollbar.

Hodnoty

• visible (predvolené) - Vytečený obsah je vykreslený mimo hraníc elementu.
• hidden - Obsah je orezaný tak, aby sa vošiel do elementu. Čo sa nezmestilo, nie je zobrazené.
• scroll - element je pridaný scrollbar tak, aby bolo možné zobraziť celý jeho obsah. Scrollbar je pridaný vždy a na obe strany elementu.
• auto - Scrollbar je pridaný elementu iba v prípade, že sa obsah do elementu nezmestí.
• inherit - Vlastnosť overflow bude zdedená od rodičovského elementu.

Ukážka

Vytvorme menšie element, než bude jeho obsah, a necháme ho vytiecť:

#kontejner
{
    overflow: visible;
    width: 300px;
    height: 100px;
    border: 1px solid blue;
}

Dôležité je nastaviť šírku / výšku kontajnera. V defaultným nastavení sa div automaticky zväčšuje, pokiaľ nemá špecifikovanú žiadnu veľkosť. Naša HTML bude také:

<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ýsledok:

Teraz nechajme vytečený obsah orezať pomocou hodnoty hidden:

overflow: hidden;

výsledok:

Vyskúšajme ešte hodnotu auto:

overflow: auto;

výsledok:

Overflow-x a overflow-y

Pomocou CSS 3 vlastností overflow-x a overflow-y nastavujeme správanie HTML elementu v prípade, že jeho obsah pretečie šírku (u overflow-x) alebo výšku (u overflow-y) elementu. Takto môžeme obsah opäť skryť, nechať pretiecť alebo elementu vytvoriť scrollbar, a to pomocou rovnakých kľúčových slov ako vyššie u prostého overflow.

Ukážka overflow-x

Vytvorme si element <div > s rozmermi 200px × 150px a modrým, plným rámčekom (border) o šírke 1px. Do tohto divu umiestnime odstavec s šírkou 300px a textom Lorem ipsum, ktorý necháme pretekať:

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ýsledok:

Obdobne si môžeme vyskúšať overflow-y, avšak tentoraz necháme pretekajúca obsah skryť pomocou atribútu hidden (povšimnime si pritom, že suchý overflow-x sa bude počítať ako auto):

div {
    overflow-x: hidden;
    width: 200px;
    height: 150px;
    border: 1px solid #0079db; /* modrá barva */
}

p {
    width: 300px;
}

výsledok:

V budúcej lekcii, Nastaviteľná veľkosť a orezávanie prvkov , sa pozrieme na zmeny veľkosti prvku užívateľom a na úpravy viditeľnej oblasti prvku na stránke.