Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Sisällön Ylivuodon Hallinta CSS:ssä | CSS-sijoittelun Hallinta
Edistyneet CSS-tekniikat

bookSisä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.html

index.css

index.css

copy

scroll

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

index.html

index.html

index.css

index.css

copy

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.html

index.css

index.css

copy
question mark

Mitä overflow-ominaisuus tekee?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 12

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

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

bookSisällön Ylivuodon Hallinta CSS:ssä

Pyyhkäise näyttääksesi valikon

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.html

index.css

index.css

copy

scroll

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

index.html

index.html

index.css

index.css

copy

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.html

index.css

index.css

copy
question mark

Mitä overflow-ominaisuus tekee?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 12
some-alt