A overflowtulajdonság szabályozza, hogy mi történik a tartalmán, amely a határain kívül esik: képzeljen el egy divolyan képet, amelyben kifejezetten 200 képpontos szélességet állított be, de 300 képpont széles képet tartalmaz. Ez a kép kilóg a div-ből, és visiblealapértelmezés szerint az lesz. Míg ha beállítja az overflowértéket hidden, a kép 200 képpontos felbontással vág le.
div ( overflow: visible | hidden | scroll | auto | inherit )Értékek
visible: a tartalom nincs kivágva, ha a dobozán kívül halad. Ez a tulajdonság alapértelmezett értékehidden: a túlcsorduló tartalom el lesz rejtve.scroll: hasonló a rejtetthez, kivéve, ha a felhasználók át tudják görgetni a rejtett tartalmatauto: ha a tartalom a dobozán kívül halad, akkor a tartalom el lesz rejtve, míg a gördítősávnak láthatónak kell lennie a felhasználók számára a tartalom többi részének elolvasásához.initial: az alapértelmezett értéket használjavisibleinherit: a túlcsordulást a szülőelem értékére állítja.
Ne feledje, hogy a szöveg természetesen be fog burkolózni az elem végén (hacsak nem változik a szóköz), így a szöveg ritkán okozza a túlcsordulást. Hacsak nincs beállítva magasság, a szöveg csak egy elemet is magasabbra tol. A túlcsordulás akkor fordul elő gyakrabban, ha kifejezett szélességek és magasságok vannak meghatározva, és nem lenne kívánatos, hogy bármilyen tartalom kifolyjon, vagy amikor kifejezetten kerülik a görgetést.
Látható
Ha egyáltalán nem állítja be a túlcsordulási tulajdonságot, akkor az alapértelmezett látható. Tehát általában nincs ok arra, hogy ezt a tulajdonságot kifejezetten láthatóvá tegye, hacsak nem írja felül, hogy máshova állítsa be.
Fontos megjegyezni, hogy bár a tartalom a dobozon kívül látható, ez a tartalom nem befolyásolja az oldal folyamatát. Például:
Általában nem szabad statikus magasságot beállítani azokon a dobozokon, amelyekben webszöveg van, ezért ennek nem szabad előjönnie.
Rejtett
Az alapértelmezett látható ellentéte rejtve van . Ez szó szerint elrejt minden olyan tartalmat, amely túlmutat a dobozon.
Ez különösen hasznos dinamikus tartalom és a túlcsordulás lehetősége esetén, amely komoly elrendezési problémákat okoz. Ne feledje azonban, hogy az így elrejtett tartalom teljesen hozzáférhetetlen (a forrás megtekintésétől eltekintve). Tehát például egy felhasználó alapértelmezett betűmérete nagyobb, mint amire számíthatna, előfordulhat, hogy a szöveget egy dobozon kívülre tolja, és teljesen elrejti a nézete elől.
Tekercs
Ha egy mező túlcsordulási értékét görgetésre állítja, a tartalom el lesz rejtve a dobozon kívüli megjelenítéstől, de gördítősávokat kínál a doboz belsejének görgetéséhez a tartalom megtekintéséhez.
Ennél az értéknél figyelemre méltó, hogy mindkettő vízszintes és függőleges gördítősávot kap, függetlenül attól, hogy a tartalomhoz csak az egyik vagy a másik szükséges.
Az iOS lendületes görgetése engedélyezhető ehhez az értékhez a -webkit-overflow-scrolling.
Megjegyzés: Az OS X Lion alkalmazásban, amikor a gördítősávok csak használatkor jelennek meg, akkor scrolljobban viselkedik, mint autohogy csak a szükséges gördítősávok jelennek meg.
Auto
Az automatikus túlcsordulás nagyon hasonlít a görgetési értékhez, csak ez megoldja a gördítősávok lekérésének problémáját, amikor nincs rá szükség. A gördítősávok csak akkor jelennek meg, ha van olyan tartalom, amely valójában kitör az elemből.
overflow-x és overflow-y
A tartalom túlfolyásának vízszintes vagy függőleges manipulálása a overflow-xés overflow-ytulajdonságokkal is lehetséges. Például a bemutató alatt a vízszintes túlcsordulás görgethető, miközben a doboz magasságán túlmutató szöveg rejtve van:
.box ( overflow-y: hidden; overflow-x: scroll; )Úszó klíring
A túlcsordulás beállításának egyik legnépszerűbb módja furcsa módon az úszó tisztítás. A túlcsordulás beállítása nem törli az úszt az elemnél, hanem önmagát. Ez azt jelenti, hogy a túlcsordulású elem (kivéve minden értéket visible) olyan nagyra bővül, amennyire szüksége van ahhoz, hogy magában foglalja a lebegő gyermekelemeket (összeesés helyett), feltételezve, hogy a magasság nincs megadva. Mint ez:
Jobb úszó törlési technika a clearfix, mivel nem igényli a túlcsordulási tulajdonság módosítását, amire nincs szüksége.
Blokkformázási környezet generálása
Érdekes megjegyezni, hogy overflowez egy új blokkformázási kontextust is létrehoz, amely akkor hasznos, ha egy blokk elemet egy lebegő mellé akarunk igazítani. Az alábbi példában megmutatjuk, hogy számos bekezdés hogyan fog egymással kölcsönhatásba lépni egy lebegő képpel alapértelmezés szerint, majd overflow: hiddena szöveget a saját mezőjébe igazítjuk:
Ez Nicole Sullivan nagyszerű bejegyzéséből származik, amely inspirálta a médiaobjektumot.
Stílusolhatók-e a gördítősávok CSS-sel?
Korábban az IE-ben (v5.5?) Képes voltál gördíteni a sávokat, de nem többet. A WebKit böngészőkben most újra stílusba hozhatja őket. Ha böngészőkön keresztüli egyedi gördítősávokra van szüksége, keresse meg a JavaScript-et.
Ha egy elemhez gördítősávokat kell mellékelni a túlcsordulás értékének tiszteletben tartásához, a Firefox azokat az elemen kívülre helyezi, a látható szélességet / magasságot a deklarált módon megtartva. Az IE beteszi a gördítősávokat, megtartva a teljes szélességet / magasságot a deklarált módon.
Demó
A cikk bemutatói erről a mintaoldalról származnak.
Böngésző támogatás
Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.
Asztal
| Króm | Firefox | AZAZ | Él | Szafari |
|---|---|---|---|---|
| 91. | 87 | 11. | 88 | TP |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | 14,0–14,4 |
Összefüggő
- Az úszó tulajdonság
Több információ
- A Humble Clearfix megértése
- Túlcsordulás: titkos előny
- Túlcsordulás az MDN-en
- Túlcsordulás a W3C-n
- A test nem kívánt túlcsordulásának megtalálása / rögzítése