Přetaktování v HTML5

Jakmile zahájíme cestu změny velikostí prvků a jejich kontejnerů, vždy přijde čas, kdy tyto dva objekty již nebudou kompatibilní a my získáme strašný účinek přetékat nebo přetečení, což není nic jiného než efekt, že jeden prvek je větší než druhý a vypadne z kontejneru.
Podívejme se na klasický příklad prvku, který je svým obsahem velmi malý a který generuje přetečení, protože vše je snáze vidět na příkladech, nejprve se podíváme na jeden, než se podíváme na vlastnosti, které nám pomáhají řídit přetečení.

 Příklad
Existuje spousta různých druhů ovoce - existuje více než 500 odrůd banánů. V době, kdy přidáme nespočet druhů jablek, pomerančů a dalšího známého ovoce, máme před sebou tisíce možností.

Předchozí kód generuje v prohlížeči následující výsledek:

Jak vidíme text o předání kapacity kontejneru, k opravě toho můžeme použít vlastnost přetékat, podívejme se na vlastnosti, než přistoupíme k nápravě tohoto problému:

overflow-x / overflow-y: Určují chování horizontálního nebo vertikálního přetečení.

Přetékat: Je to zkratka k použití předchozí vlastnosti a pořadí, ve kterém funguje, je přetečení, přetečení x, přetečení y.

Vlastnosti, které lze s prvkem použít přetékat jsou následující:

auto: Tato hodnota přenáší na prohlížeč odpovědnost za rozhodování o tom, co dělat. Obvykle se stane, že když prvek začne přetékat, zobrazí se posuvník.

skrytý: Obsah je zobrazen až do části, která nepřeteče, přičemž skrývá zbytek obsahu a nemá mechanismy, které by uživateli řekly, co má udělat, aby viděl zbytek obsahu.

žádný obsah: Přetečený obsah je odstraněn, pokud jej nelze umístit do kontejneru. Tuto hodnotu nepodporuje žádný z nejpopulárnějších prohlížečů

bez zobrazení: Obsah nelze zobrazit, pokud jej nelze plně zobrazit. Tuto hodnotu nepodporuje žádný z nejpopulárnějších prohlížečů.

svitek: Prohlížeč generuje posuvník, který uživateli umožňuje vždy vidět přetečený obsah uvnitř kontejneru. Lišta bude záviset na prohlížeči a systému, který definuje způsob jejího zobrazení. Posuvník bude vždy viditelný, i když prvek nepřeteče.

viditelné: Toto je výchozí hodnota. Obsah se vždy zobrazí, i když přetéká.

Nyní, když máme nástroje k útoku na přetečení, podívejme se v praxi, jak jej můžeme použít, nic lepšího než malý kód, který to předvede:

 Příklad
Existuje spousta různých druhů ovoce - existuje více než 500 odrůd banánů. V době, kdy přidáme nespočet druhů jablek, pomerančů a dalšího známého ovoce, máme před sebou tisíce možností.
Existuje spousta různých druhů ovoce - existuje více než 500 odrůd banánů. V době, kdy přidáme nespočet druhů jablek, pomerančů a dalšího známého ovoce, máme před sebou tisíce možností.

Použili jsme dva prvky, abychom ukázali, jak přetékat, do prvního umístíme nemovitost skrytý kde víme, že se zobrazí pouze obsah až tam, kde začíná přetečení, pak je zbytek skrytý a u druhého použijeme svitek, pomocí kterého se zobrazí posuvník bez ohledu na to, zda prvek přeteče, uvidíme výsledek:

Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod