Overlopen in HTML5

Als we eenmaal zijn begonnen met het aanbrengen van wijzigingen in de afmetingen van de elementen en hun containers, komt er altijd een moment dat de twee niet langer compatibel zijn en we het vreselijke effect krijgen van overloop of overloop, wat niets meer is dan het effect dat het ene element groter is dan het andere en uit zijn houder valt.
Laten we een klassiek voorbeeld bekijken van een element dat erg klein is voor zijn inhoud en dat een overloop genereert, omdat alles gemakkelijker te zien is door voorbeelden, laten we eerst een element bekijken voordat we verder gaan om de eigenschappen te bekijken die ons helpen de overloop te beheersen.

 Voorbeeld
Er zijn veel verschillende soorten fruit - er zijn alleen al meer dan 500 soorten bananen. Tegen de tijd dat we de talloze soorten appels, sinaasappels en ander bekend fruit toevoegen, staan ​​we voor duizenden keuzes.

De vorige code genereert het volgende resultaat in de browser:

Zoals we de tekst over het doorgeven van de capaciteit van de containerbox kunnen zien, kunnen we de eigenschap gebruiken om dit te corrigeren overloop, laten we de eigenschappen bekijken voordat we doorgaan met het corrigeren van dit probleem:

overloop-x / overloop-y: Ze bepalen het gedrag van horizontale of verticale overloop.

Overloop: Het is een snelkoppeling om de vorige eigenschap te gebruiken en de volgorde waarin het werkt is overflow, overflow x, overflow y.

De eigenschappen die met het element kunnen worden gebruikt overloop zijn als volgt:

auto: Deze waarde delegeert aan de browser de verantwoordelijkheid om te beslissen wat te doen, wat er meestal gebeurt, is dat er een schuifbalk wordt weergegeven wanneer het element begint over te lopen dat het bevat.

verborgen: De inhoud wordt weergegeven tot aan het deel dat niet overloopt, de rest van de inhoud wordt verborgen, het heeft geen mechanismen om de gebruiker te vertellen wat hij moet doen om de rest van de inhoud te zien.

geen inhoud: Overgelopen inhoud wordt verwijderd als deze niet in de container kan worden ondergebracht. Deze waarde wordt niet ondersteund door een van de meest populaire browsers

geen scherm: Inhoud wordt verborgen als deze niet volledig kan worden weergegeven. Deze waarde wordt niet ondersteund door een van de meest populaire browsers.

rol: De browser genereert een schuifbalk waarmee de gebruiker altijd de overvolle inhoud in de container kan zien. De balk is afhankelijk van de browser en het systeem om te bepalen hoe deze wordt weergegeven. De schuifbalk is altijd zichtbaar, zelfs als het element niet overloopt.

zichtbaar: Dit is de standaardwaarde. De inhoud wordt altijd weergegeven, zelfs als deze overloopt.

Nu we de tools hebben om een ​​overflow aan te vallen, laten we in de praktijk kijken hoe we het kunnen toepassen, niets beter dan een kleine code om het te demonstreren:

 Voorbeeld
Er zijn veel verschillende soorten fruit - er zijn alleen al meer dan 500 soorten bananen. Tegen de tijd dat we de talloze soorten appels, sinaasappels en ander bekend fruit toevoegen, staan ​​we voor duizenden keuzes.
Er zijn veel verschillende soorten fruit - er zijn alleen al meer dan 500 soorten bananen. Tegen de tijd dat we de talloze soorten appels, sinaasappels en ander bekend fruit toevoegen, staan ​​we voor duizenden keuzes.

We hebben twee elementen gebruikt om aan te tonen hoe de overloop, in de eerste plaatsen we de eigenschap verborgen waar we weten dat alleen de inhoud wordt getoond tot waar de overflow begint, dan is de rest verborgen en voor de tweede gebruiken we scroll, waarmee een schuifbalk wordt getoond of het element overloopt of niet, laten we het resultaat zien:

Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven