✅ Overbelastning i HTML5

Innholdsfortegnelse

Når vi først begynner å gjøre endringer i størrelsen på elementene og deres beholdere, kommer det alltid en tid da de to ikke lenger er kompatible, og vi får den forferdelige effekten av flyte eller overløp, som ikke er mer enn effekten av at ett element er større enn et annet og faller ut av beholderen.
La oss se et klassisk eksempel på et element som er veldig lite for innholdet og som genererer et overløp, ettersom alt er lettere å se gjennom eksempler, la oss først se et før vi fortsetter å se egenskapene som hjelper oss å kontrollere overløpet.

Eksempel

Det er mange forskjellige frukttyper - det er over 500 varianter av bananer alene. Når vi legger til de utallige typer epler, appelsiner og annen kjent frukt, står vi overfor tusenvis av valg.

Den forrige koden genererer følgende resultat i nettleseren:

Som vi kan se teksten om å passere kapasiteten til containerboksen, kan vi bruke eiendommen for å korrigere dette flyte, la oss se på egenskapene før vi fortsetter med å korrigere dette problemet:

overflow-x / overflow-y: De bestemmer oppførselen til horisontal eller vertikal overløp.

Flyte: Det er en snarvei for å bruke den forrige egenskapen og rekkefølgen den fungerer i er overflow, overflow x, overflow y.

Egenskapene som kan brukes med elementet flyte er som følger:

bil: Denne verdien delegerer til nettleseren ansvaret for å bestemme hva du skal gjøre, vanligvis skjer det at en rullefelt vises når elementet begynner å flyte over som inneholder det.

skjult: Innholdet vises opp til delen som ikke flyter over, skjuler resten av innholdet, det har ikke mekanismer for å fortelle brukeren hva han skal gjøre for å se resten av innholdet.

Ikke noe innhold: Overflødig innhold fjernes hvis det ikke får plass i beholderen. Denne verdien støttes ikke av noen av de mest populære nettleserne

ingen visning: Innholdet er skjult hvis det ikke kan vises fullt ut. Denne verdien støttes ikke av noen av de mest populære nettleserne.

bla: Nettleseren genererer en rullefelt slik at brukeren alltid kan se det overfylte innholdet inne i beholderen. Linjen vil avhenge av nettleseren og systemet for å definere måten den vises på. Rullefeltet vil alltid være synlig selv om elementet ikke flyter over.

synlig: Dette er standardverdien. Innholdet vises alltid selv om det flyter over.

Nå som vi har verktøyene til å angripe et overløp, la oss se i praksis hvordan vi kan bruke det, ingenting bedre enn en liten kode for å demonstrere det:

Eksempel

Det er mange forskjellige frukttyper - det er over 500 varianter av bananer alene. Når vi legger til de utallige typer epler, appelsiner og annen kjent frukt, står vi overfor tusenvis av valg.

Vi har brukt to elementer for å demonstrere hvordan flyte, i den første plasserer vi eiendommen skjult der vi vet at bare innholdet vil bli vist opp til der overløpet begynner, så er resten skjult, og for det andre bruker vi rulling, med hvilken en rullefelt vil bli vist om elementet overløper eller ikke, la oss se resultatet: