overflowOminaisuudet -ohjaimet mitä tapahtuu sisällön taukojen ulkopuolella sen rajojen: kuvitella div, jossa olet nimenomaan asetettu 200px leveä, mutta se sisältää kuvan, joka on 300px leveä. Tuo kuva tulee ulos div: stä ja on visibleoletusarvoisesti. Jos asetat overflowarvoksi arvon hidden, kuva leikkautuu 200 kuvapisteen kohdalla.
div ( overflow: visible | hidden | scroll | auto | inherit )Arvot
visible: sisältöä ei leikata, kun se etenee laatikkonsa ulkopuolella. Tämä on kiinteistön oletusarvohidden: täynnä oleva sisältö piilotetaan.scroll: samanlainen kuin piilotettu, paitsi että käyttäjät voivat selata piilotettua sisältöäauto: Jos sisältö etenee laatikkonsa ulkopuolella, kyseinen sisältö piilotetaan, kun taas vierityspalkin pitäisi olla näkyvissä, jotta käyttäjät voivat lukea muun sisällön.initial: käyttää oletusarvoa, joka onvisibleinherit: asettaa ylivuoton pääelementtinsä arvoksi.
Muista, että teksti kiertyy luonnollisesti elementin loppuun (ellei tyhjää tilaa muuteta), joten teksti on harvoin syy ylivuotoon. Ellei korkeutta ole asetettu, teksti työntää myös elementin pitemmäksi. Ylivuoto tulee esiin yleisemmin, kun määritetään eksplisiittiset leveydet ja korkeudet, ja ei ole toivottavaa, että mikä tahansa sisältö leviää tai kun vieritystä nimenomaisesti vältetään.
Näkyvä
Jos et määritä ylivuoto-ominaisuutta ollenkaan, oletusarvo on näkyvissä. Joten ei ole mitään syytä asettaa tätä ominaisuutta nimenomaisesti näkyväksi, ellet korvaa sitä, että asetat sen muualle.
Tärkeää muistaa tässä on, että vaikka sisältö on näkyvissä laatikon ulkopuolella, kyseinen sisältö ei vaikuta sivun kulkuun. Esimerkiksi:
Yleensä sinun ei pitäisi missään tapauksessa asettaa staattisia korkeuksia laatikoihin, joissa on verkkoteksti, joten sen ei pitäisi tulla esiin.
Piilotettu
Oletusnäkymän vastakohta on piilotettu . Tämä kirjaimellisesti piilottaa kaiken sisällön, joka ulottuu laatikon ulkopuolelle.
Tämä on erityisen hyödyllistä käytettäessä dynaamista sisältöä ja mahdollisuutta ylivuotoon, joka aiheuttaa vakavia asetteluongelmia. Muista kuitenkin, että tällä tavalla piilotettu sisältö ei ole täysin käytettävissä (lähdekoodin katselemisen ulkopuolella). Joten esimerkiksi käyttäjän oletuskirjasinkoko on asetettu odotettua suuremmaksi, saatat työntää tekstiä laatikon ulkopuolelle ja piilottaa sen kokonaan käyttäjän näkymästä.
Vieritä
Ruudun ylivuoto-arvon asettaminen vieritettäväksi piilottaa sisällön renderoinnista laatikon ulkopuolella, mutta tarjoaa vierityspalkkeja vierittämään laatikon sisäosaa sisällön tarkastelemiseksi.
Tällä arvolla on huomattava, että saat molemmat vaaka- ja pystysuuntaisia vierityspalkkeja riippumatta siitä, vaikka sisältö vaatii vain yhtä tai toista.
iOS: n vauhdin vieritys voidaan ottaa käyttöön tälle arvolle -webkit-overflow-scrolling.
Huomaa: Kun vierityspalkit on asetettu näyttämään vain käytettäessä, OS X Lion scrollkäyttäytyy enemmän kuin siinä auto, että vain tarvittavat vierityspalkit näkyvät.
Auto
Automaattinen ylivuoto on hyvin samanlainen kuin vieritysarvo, vain se ratkaisee ongelman saada vierityspalkit, kun et tarvitse niitä. Vierityspalkit näkyvät vain, jos on sisältöä, joka todella irtoaa elementistä.
ylivuoto-x ja ylivuoto-y
On myös mahdollista manipuloida ylivuoto sisällön vaaka- tai pystysuunnassa overflow-xja overflow-yominaisuudet. Esimerkiksi alla olevassa esittelyssä vaakasuoraa ylivuotoa voidaan selata, kun taas laatikon korkeuden ulkopuolella oleva teksti on piilotettu:
.box ( overflow-y: hidden; overflow-x: scroll; )Kelluva selvitys
Yksi ylivuoton asettamisen suosituimmista käyttötavoista on oudosti kyllä kelluva selvitys. Ylivirtauksen asettaminen ei tyhjennä elementin kelluketta, vaan se tyhjentyy itsestään. Tämä tarkoittaa sitä, että ylivuotoa sisältävä elementti (paitsi mikä tahansa arvo visible) ulottuu niin suureksi kuin se tarvitsee kattamaan sisällä olevat uivat lapsielementit (romahtamisen sijaan), olettaen, että korkeutta ei ilmoiteta. Kuten tämä:
Parempi float-selvitystekniikka on clearfix, koska se ei vaadi sinua muuttamaan ylivuotoominaisuutta tavalla, jota et tarvitse.
Luo lohkon muotoilun konteksti
On mielenkiintoista huomata, että overflowse luo myös uuden lohkon muotoilun kontekstin, joka on hyödyllinen, jos haluamme kohdistaa lohkoelementin kelluvan elementin viereen. Alla olevassa esimerkissä näytetään, kuinka monta kappaletta toimii oletusarvoisesti kelluvan kuvan kanssa, ja sitten käytämme overflow: hiddentekstin tasaamista omaan ruutuunsa:
Tämä tulee Nicole Sullivanin upeasta viestistä, joka inspiroi mediaobjektia.
Voiko vierityspalkkeja muotoilla CSS: llä?
Aikaisemmin pystyt tyylittämään vierityspalkkeja IE: ssä (v5.5?), Mutta ei enempää. Voit muotoilla ne nyt uudelleen WebKit-selaimissa. Jos tarvitset selaimen välisiä mukautettuja vierityspalkkeja, etsi JavaScript.
Jos elementtiin on liitettävä vierityspalkit ylivuotoarvon noudattamiseksi, Firefox asettaa ne elementin ulkopuolelle pitäen näkyvän leveyden / korkeuden ilmoitetulla tavalla. IE asettaa vierityspalkit sisälle pitäen kokonaisleveyden / korkeuden ilmoitetulla tavalla.
Demo
Tämän artikkelin esittelyt on otettu tältä mallisivulta.
Selaimen tuki
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14,0 - 14,4 |
Liittyvät
- Kelluva ominaisuus
Lisää tietoa
- Humble Clearfix -sovelluksen ymmärtäminen
- Ylivuoto: salainen etu
- MDN: n ylivuoto
- Ylivuoto W3C: ssä
- Tahattoman rungon ylivuoton etsiminen / korjaaminen