Tyto overflowvlastnost určuje, co se stane s obsahem, který přestávky mimo jeho hranice: představit divve kterém jste explicitně stanovena na 200px široký, ale obsahuje obrázek, který je 300 pixelů široký. Tento obrázek bude vyčnívat z div a bude visibleve výchozím nastavení. Pokud nastavíte overflowhodnotu na hidden, obraz se ořízne na 200px.
div ( overflow: visible | hidden | scroll | auto | inherit )Hodnoty
visible: obsah není oříznut, když pokračuje mimo jeho pole. Toto je výchozí hodnota vlastnostihidden: přetékající obsah bude skryt.scroll: podobně jako skryté, ale uživatelé budou moci procházet skrytým obsahemauto: pokud obsah pokračuje mimo jeho rámeček, bude tento obsah skrytý, zatímco posuvník by měl být viditelný, aby si uživatelé mohli přečíst zbytek obsahu.initial: používá výchozí hodnotu, která jevisibleinherit: nastaví přetečení na hodnotu svého nadřazeného prvku.
Nezapomeňte, že text se přirozeně zalomí na konci prvku (pokud se nezmění prázdné místo), takže text bude zřídka příčinou přetečení. Pokud není nastavena výška, text pouze posune prvek vyšší. Přetečení přichází do hry častěji, když jsou nastaveny explicitní šířky a výšky a bylo by nežádoucí, aby se jakýkoli obsah vysypal, nebo když se výslovně vyhýbáme posouvání.
Viditelné
Pokud vůbec nenastavíte vlastnost přetečení, výchozí hodnota je viditelná. Obecně tedy není žádný důvod explicitně nastavit tuto vlastnost na viditelnou, pokud ji nepřepíšete od nastavení jinde.
Důležité je zapamatovat si, že i když je obsah viditelný mimo rámeček, tento obsah neovlivňuje tok stránky. Například:
Obecně byste neměli nastavovat statické výšky na polích, ve kterých je webový text, takže by to nemělo přijít.
Skrytý
Opak výchozího viditelného je skrytý . To doslova skrývá veškerý obsah, který přesahuje rámec.
To je zvláště užitečné při použití s dynamickým obsahem a možností přetečení způsobujícího vážné problémy s uspořádáním. Mějte však na paměti, že takto skrytý obsah je naprosto nepřístupný (kromě zobrazení zdroje). Například například uživatel má nastavenou výchozí velikost písma větší, než byste očekávali, můžete tlačit text mimo rámeček a zcela jej skrýt ze svého pohledu.
Svitek
Nastavení hodnoty přetečení pole na posouvání skryje obsah před vykreslením mimo pole, ale nabídne posuvníky pro posouvání vnitřku pole pro zobrazení obsahu.
S touto hodnotou je důležité, že získáte OBĚHÉ vodorovné a svislé posuvníky bez ohledu na to, i když obsah vyžaduje pouze jeden nebo druhý.
Pro tuto hodnotu lze povolit posouvání hybnosti iOS pomocí -webkit-overflow-scrolling.
Poznámka: V OS X Lion, když jsou posuvníky nastaveny tak, aby se zobrazovaly pouze při použití, se scrollchová více auto, protože se zobrazí pouze potřebné posuvníky.
Auto
Automatické přetečení je velmi podobné hodnotě posouvání, pouze řeší problém získání posuvníků, když je nepotřebujete. Posuvníky se zobrazí, pouze pokud existuje obsah, který se skutečně vylomí z prvku.
overflow-x a overflow-y
Je také možné manipulovat přetečení obsahu horizontálně nebo vertikálně s overflow-xa overflow-yvlastnostmi. Například v ukázce pod vodorovným přetečením lze procházet, zatímco text přesahující výšku rámečku je skrytý:
.box ( overflow-y: hidden; overflow-x: scroll; )Float Clearing
Jedním z nejpopulárnějších způsobů nastavení přetečení je kupodivu čištění plováku. Nastavení přetečení nevymaže plovák na prvku, samo se vymaže. To znamená, že prvek s přetečením (libovolná hodnota kromě visible) se rozšíří tak velký, jak je potřeba, aby zahrnoval podřízené prvky uvnitř, které jsou plovoucí (místo sbalení), za předpokladu, že výška není deklarována. Takhle:
Lepší technikou čištění plováku je clearfix, protože nevyžaduje změnu vlastnosti přetečení způsobem, který nepotřebujete.
Generování kontextu formátování bloku
Je zajímavé si všimnout, že overflowse také vytvoří nový kontext formátování bloku, který je užitečný, pokud chceme zarovnat prvek bloku vedle plovoucího. V níže uvedeném příkladu si ukážeme, jak bude řada odstavců ve výchozím nastavení interagovat s plovoucím obrázkem, a pak použijeme overflow: hiddenk zarovnání textu v jeho vlastním poli:
Vychází to ze skvělého příspěvku Nicole Sullivanové, který inspiroval mediální objekt.
Lze stylovat posuvníky pomocí CSS?
Dříve jste byli schopni upravovat posuvníky v IE (v5.5?), Ale už ne. Nyní je můžete znovu upravovat v prohlížečích WebKit. Pokud potřebujete vlastní posuvné lišty pro různé prohlížeče, podívejte se na JavaScript.
Pokud k prvku potřebuje mít připojené posuvníky, aby respektoval hodnotu přetečení, Firefox je umístí mimo prvek a ponechá viditelnou šířku / výšku tak, jak je deklarováno. IE vkládá posuvníky dovnitř a udržuje celkovou šířku / výšku tak, jak je deklarováno.
Ukázka
Ukázky pro tento článek převzaty z této ukázkové stránky.
Podpora prohlížeče
Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.
plocha počítače
| Chrome | Firefox | TJ | Okraj | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Mobilní / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Příbuzný
- Vlastnost float
Více informací
- Pochopení Humble Clearfix
- Přetečení: tajná výhoda
- Přetečení na MDN
- Přetečení na W3C
- Nalezení / oprava neúmyslného přetečení těla