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 kutenscroll
, 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
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
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
Sisä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 kutenscroll
, 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
Kiitos palautteestasi!