Oppiskele Sisällön Ylivuodon Hallinta CSS:ssä

Tarkastellaan, kuinka voimme hallita sisällön ylivuotoa yhden ominaisuuden avulla. Joskus käy niin, että elementillä on kiinteä width ja height. Kuitenkin sisäinen sisältö on paljon suurempi kuin käytettävissä oleva tila. overflow-ominaisuus määrittää, miten elementin sisältö käyttäytyy, kun se ylittää elementille asetetut height- tai width-arvot.

overflow: visible | scroll | hidden | auto

visible – oletusarvo. Sisältö ylittää elementin reunat ja pysyy näkyvissä;
scroll – Sisältö ylittää elementin reunat, ja vierityspalkki ilmestyy, jolloin käyttäjä voi vierittää sekä pystysuunnassa että vaakasuunnassa;
hidden – Ylittävä sisältö leikataan pois eikä ole näkyvissä;
auto – toimii kuten scroll, mutta vierityspalkit ilmestyvät vain, kun sisältö ylittää elementin reunat.

Huomio

Ylittävä sisältö ei vaikuta muiden elementtien geometriaan.

visible

Jos overflow-ominaisuutta ei ole asetettu, sen oletusarvo on visible. Tämä tarkoittaa, että sisältö näytetään elementin reunojen ulkopuolella. Esimerkissä laatikon reunat on korostettu värillä darkblue, ja laatikolla on kiinteät width- ja height-ominaisuudet.

index.html

index.css

scroll

Koko elementin sisältö voidaan tarkastella vierityspalkin avulla. Tarkastellaan esimerkkiä:

index.html

index.css

hidden

Kaikki ylivuotava sisältö piilotetaan, eikä käyttäjä näe sitä koskaan. Yleisesti tämä on hyödyllistä vain, kun halutaan toteuttaa koristeellisia tehosteita.

index.html

index.css

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 2. Luku 12

Kysy tekoälyä

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Suggested prompts:

Can you show examples of how each overflow value looks in practice?

What are some common use cases for each overflow property?

How does overflow interact with other CSS properties like position or display?

Awesome!

Completion rate improved to 2.04

Pyyhkäise näyttääksesi valikon

overflow: visible | scroll | hidden | auto

visible – oletusarvo. Sisältö ylittää elementin reunat ja pysyy näkyvissä;
scroll – Sisältö ylittää elementin reunat, ja vierityspalkki ilmestyy, jolloin käyttäjä voi vierittää sekä pystysuunnassa että vaakasuunnassa;
hidden – Ylittävä sisältö leikataan pois eikä ole näkyvissä;
auto – toimii kuten scroll, mutta vierityspalkit ilmestyvät vain, kun sisältö ylittää elementin reunat.

Huomio

Ylittävä sisältö ei vaikuta muiden elementtien geometriaan.

visible

index.html

index.css

scroll

Koko elementin sisältö voidaan tarkastella vierityspalkin avulla. Tarkastellaan esimerkkiä:

index.html

index.css

hidden

Kaikki ylivuotava sisältö piilotetaan, eikä käyttäjä näe sitä koskaan. Yleisesti tämä on hyödyllistä vain, kun halutaan toteuttaa koristeellisia tehosteita.

index.html

index.css

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 2. Luku 12