Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Pouze tento týden sleva až 80 % na e-learning týkající se C a C++. Zároveň využij akce až 80 % zdarma při nákupu e-learningu - více informací.
c week

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:

Overflow: visible
index.html
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

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

overflow: hidden;

výsledok:

Overflow: hidden
index.html

Vyskúšajme ešte hodnotu auto:

overflow: auto;

výsledok:

Overflow: auto
index.html

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:

Overflow-x: visible
index.html

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:

Overflow-x: visible
index.html

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.


 

Predchádzajúci článok
Plávajúce obsah v CSS 3
Všetky články v sekcii
CSS3
Preskočiť článok
(neodporúčame)
Nastaviteľná veľkosť a orezávanie prvkov
Článok pre vás napísal Jakub Raida
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
Autor má rád literaturu, dějiny, filmy, počítačové hry, paleontologii, vesmír a programování.
Aktivity

 

 

Komentáre

Avatar
Michael Stanovský:10.10.2021 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.

Odpovedať
10.10.2021 3:05
Programátor dělá co umí, počítač si dělá co chce.
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!
Avatar
Pavel Kubalík:21. marca 14:47

Dobrý den
Dle mého názoru došlo k malé chybce v posledním příkladu. Ve stylování má být opravdu overlow-y.
Pak je výstup tak jak je zobrazen.
pk

 
Odpovedať
21. marca 14:47
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 2 správy z 2.