Tieto overflowvlastnosť určuje, čo sa stane s obsahom, ktorý prestávky mimo jeho hranice: predstaviť divv ktorom ste explicitne stanovená na 200px široký, ale obsahuje obrázok, ktorý je 300 pixelov široký. Tento obrázok bude trčať z divu a bude visiblepredvolene. Pokiaľ nastavíte overflowhodnotu na hidden, obraz sa orezá na 200 pixelov.
div ( overflow: visible | hidden | scroll | auto | inherit )Hodnoty
visible: obsah nie je orezaný, keď pokračuje mimo krabicu. Toto je predvolená hodnota vlastnostihidden: pretekajúci obsah bude skrytý.scroll: podobne ako skryté, ale používatelia budú môcť prechádzať skrytým obsahomauto: ak obsah pokračuje mimo jeho políčka, bude tento obsah skrytý, zatiaľ čo pre používateľov by mal byť viditeľný posúvač, aby si mohli prečítať zvyšok obsahu.initial: používa predvolenú hodnotu, ktorá jevisibleinherit: nastaví pretečenie na hodnotu svojho nadradeného prvku.
Pamätajte, že text sa prirodzene zalomí na konci prvku (pokiaľ sa nezmení medzera), takže text bude zriedka príčinou pretečenia. Pokiaľ nie je nastavená výška, text iba posunie prvok tiež vyššie. Pretekanie prichádza do hry častejšie, keď sú nastavené explicitné šírky a výšky a bolo by nežiaduce, aby sa akýkoľvek obsah vysypal, alebo keď sa výslovne vyhnete posúvaniu.
Viditeľné
Ak vôbec nenastavíte vlastnosť pretečenia, predvolená hodnota je viditeľná. Všeobecne teda nie je dôvod explicitne nastaviť túto vlastnosť na viditeľnú, pokiaľ ju neprepíšete od nastavenia inde.
Tu je potrebné pamätať na to, že aj keď je obsah viditeľný mimo rámčeka, tento obsah nemá vplyv na priebeh stránky. Napríklad:
Spravidla by ste nemali nastavovať statické výšky na poliach, v ktorých je webový text, takže by sa to nemalo zobrazovať.
Skryté
Opak predvolenej viditeľnej položky je skrytý . To doslova skrýva akýkoľvek obsah, ktorý presahuje rámec tohto balenia.
To je obzvlášť užitočné pri použití s dynamickým obsahom a možnosťou pretečenia, ktoré by spôsobilo vážne problémy s usporiadaním. Nezabúdajte však, že takto skrytý obsah je úplne neprístupný (okrem zobrazenia zdroja). Napríklad napríklad používateľ má nastavenú predvolenú veľkosť písma väčšiu, ako by ste čakali, môžete tlačiť text mimo rámček a úplne ho skryť pred očami.
Prejdite
Nastavením hodnoty pretečenia poľa na rolovanie skryjete vykreslenie obsahu mimo poľa, ale ponúknete rolovacie lišty na rolovanie vnútornej strany poľa na prezeranie obsahu.
S touto hodnotou je potrebné poznamenať, že získate OBOJNÉ vodorovné a zvislé posúvače bez ohľadu na to, aj keď obsah vyžaduje iba jeden alebo druhý.
Posun hybnosti iOS je možné pre túto hodnotu povoliť pomocou -webkit-overflow-scrolling.
Poznámka: V OS X Lion, keď sú posuvné pruhy nastavené tak, aby sa zobrazovali iba pri používaní, sa scrollspráva viac auto, pretože sa zobrazia iba potrebné posuvné pruhy.
Auto
Automatické pretečenie je veľmi podobné hodnote posuvu, iba vyrieši problém získania posúvačov, keď ich nepotrebujete. Posuvníky sa zobrazia, iba ak existuje obsah, ktorý sa skutočne vylomí z prvku.
prepad-x a prepad-y
Je tiež možné manipulovať pretečeniu obsahu horizontálne alebo vertikálne s overflow-xa overflow-yvlastnosťami. Napríklad v ukážke pod horizontálnym prepadom je možné listovať, zatiaľ čo text presahujúci výšku políčka je skrytý:
.box ( overflow-y: hidden; overflow-x: scroll; )Float Clearing
Jedným z najpopulárnejších spôsobov použitia nastavenia pretečenia je, napodiv, čistenie plaváka. Nastavenie pretečenia nevymaže plavák na prvku, samo sa vymaže. To znamená, že prvok s pretečením (ľubovoľná hodnota okrem visible) sa rozšíri tak veľký, ako je potrebné, aby obsahoval podradené prvky, ktoré sú plávajúce (namiesto toho, aby sa zbalili), za predpokladu, že výška nie je deklarovaná. Páči sa ti to:
Lepšou technikou čistenia plaváka je clearfix, pretože nevyžaduje zmenu vlastnosti pretečenia spôsobom, ktorý nepotrebujete.
Generuje sa kontext formátovania bloku
Je zaujímavé si uvedomiť, že overflowsa vytvorí aj nový kontext formátovania bloku, ktorý je užitočný, ak chceme zarovnať prvok bloku vedľa vznášaného. V príklade nižšie si ukážeme, ako bude niekoľko odsekov v predvolenom nastavení interagovať s pohyblivým obrázkom, a potom použijeme overflow: hiddenna zarovnanie textu v jeho vlastnom poli:
Vyplýva to z vynikajúceho príspevku Nicole Sullivanovej, ktorý ďalej inšpiroval mediálny objekt.
Dajú sa posuvné pruhy štýlovať pomocou CSS?
Kedysi ste boli schopní upravovať posuvné pruhy v IE (v5.5?), Ale už nie. Teraz ich môžete v prehliadačoch WebKit znova upravovať. Ak potrebujete vlastné posuvné lišty pre rôzne prehliadače, vyhľadajte JavaScript.
Ak je k prvku potrebné pridať posuvné pruhy, aby sa dodržala hodnota pretečenia, Firefox ich umiestni mimo prvok a ponechá viditeľnú šírku / výšku tak, ako je deklarované. IE umiestňuje posuvné lišty dovnútra a zachováva celkovú šírku / výšku tak, ako je deklarované.
Ukážka
Ukážky tohto článku prevzaté z tejto vzorovej stránky.
Podpora prehľadávača
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
| Chrome | Firefox | IE | Hrana | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Súvisiace
- Vlastnosť float
Viac informácií
- Pochopenie Humble Clearfix
- Prepad: tajná výhoda
- Prepad na MDN
- Prepad na W3C
- Nájdenie / oprava neúmyselného pretečenia tela