Perpildytas HTML5

Kai tik pradedame keisti elementų ir jų talpyklų dydžius, visada ateina laikas, kai jie nebėra suderinami ir gauname siaubingą efektą. perpildymas arba perpildymas, o tai ne kas kita, kaip tai, kad vienas elementas yra didesnis už kitą ir iškrenta iš talpyklos.
Pažvelkime į klasikinį elemento, kurio turinys yra labai mažas ir kuris sukuria perpildymą, pavyzdį, nes viską lengviau pamatyti per pavyzdžius, prieš pradėdami pamatyti savybes, padedančias mums kontroliuoti perpildymą, pirmiausia pažiūrėkime vieną.

 Pavyzdys
Yra daug įvairių vaisių - vien tik bananų yra daugiau nei 500 veislių. Kai pridėsime daugybę obuolių, apelsinų ir kitų gerai žinomų vaisių rūšių, susidursime su tūkstančiais pasirinkimų.

Ankstesnis kodas sukuria tokį rezultatą naršyklėje:

Kaip matome tekstą apie konteinerio dėžės talpos praleidimą, norėdami tai ištaisyti, galime naudoti šią savybę perpildymasPrieš pradėdami taisyti šią problemą, pažvelkime į ypatybes:

perpildymas-x / perpildymas-y: Jie nustato horizontalaus arba vertikalaus perpildymo elgesį.

Perpildymas: Tai yra nuoroda, skirta naudoti ankstesnę ypatybę, o jos veikimo tvarka yra perpildymas, perpildymas x, perpildymas y.

Savybės, kurias galima naudoti su elementu perpildymas yra tokie:

automobilis: Ši vertė perduoda naršyklei atsakomybę nuspręsti, ką daryti, paprastai atsitinka taip, kad slinkties juosta rodoma, kai elementas pradeda perpildyti.

paslėptas: Turinys rodomas iki tos dalies, kuri neperpildoma, slepiant likusią turinio dalį, jame nėra mechanizmų, kurie nurodytų vartotojui, ką daryti, kad pamatytų likusį turinį.

be turinio: Perpildytas turinys pašalinamas, jei jo negalima sutalpinti į konteinerį. Šios vertės nepalaiko nė viena populiariausių naršyklių

nerodomas: Turinys yra paslėptas, jei jo negalima visiškai parodyti. Šios vertės nepalaiko nė viena populiariausių naršyklių.

slinkti: Naršyklė sukuria slinkties juostą, leidžiančią vartotojui visada matyti perpildytą turinį sudėtiniame rodinyje. Juosta bus rodoma priklausomai nuo naršyklės ir sistemos. Slinkties juosta visada bus matoma, net jei elementas neperpildytas.

matomas: Tai yra numatytoji vertė. Turinys visada rodomas, net jei jis perpildytas.

Dabar, kai turime įrankių, skirtų užpulti perpildymą, pažiūrėkime praktiškai, kaip mes galime jį pritaikyti, nieko geriau nei mažas kodas, parodantis:

 Pavyzdys
Yra daug įvairių vaisių - vien tik bananų yra daugiau nei 500 veislių. Kai pridėsime daugybę obuolių, apelsinų ir kitų gerai žinomų vaisių rūšių, susidursime su tūkstančiais pasirinkimų.
Yra daug įvairių vaisių - vien tik bananų yra daugiau nei 500 veislių. Kai pridėsime daugybę obuolių, apelsinų ir kitų gerai žinomų vaisių rūšių, susidursime su tūkstančiais pasirinkimų.

Mes panaudojome du elementus, norėdami parodyti, kaip perpildymas, pirmiausia mes patalpiname turtą paslėptas kur mes žinome, kad tik turinys bus rodomas iki tos vietos, kur prasideda perpildymas, tada likusi dalis yra paslėpta, o antrą kartą naudojame slinkties funkciją, su kuria bus rodoma slinkties juosta, nesvarbu, ar elementas perpildytas, ar ne, pažiūrėkime rezultatą:

Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką