CSS overløpseiendom | Forklart

Mens vi utvikler nettsteder kommer vi ofte over situasjoner der innholdet som er til stede i visse HTML -elementer overlater. Du kan velge hva du skal gjøre med det overløpende innholdet ved hjelp av CSS Overflow -egenskapen. Dette innlegget er designet for å opplyse leserne om detaljene om overløpseiendommen i CSS.

Denne opplæringen dekker.

1. Overløpseiendom
2. Synlig verdi
3. Skjult verdi
4. Bilverdi
5. Overflow-X og Overflow-y

La oss begynne.

Overløpseiendom

Overløpsegenskapen kontrollerer oppførselen til innholdet som strømmer over det spesifiserte området til et element, dessuten er overløpsegenskapen bare designet for elementer på blokknivå.

Som andre CSS -egenskaper, viser overløpsegenskapen også visse verdier som er forklart i dybden nedenfor.

Synlig verdi

Dette er en standardverdi for overløpsegenskapen. Anta at hvis innholdet ditt er plassert inne i en boks og er overfylt, vil denne verdien vise innholdet som overskrider boksen. Videre vil innholdet som vises utenfor boksegrensen ikke forstyrre justeringen av andre omkringliggende elementer.

Her er et eksempel på denne verdien.

Html

Mens vi utvikler nettsteder kommer vi ofte over situasjoner der innholdet som er til stede i visse HTML -elementer overlater. Du kan velge hva du skal gjøre med det overløpende innholdet ved hjelp av CSS Overflow -egenskapen.

CSS

Produksjon

Går videre til neste verdi.

Skjult verdi

Den skjulte verdien av overløpsegenskapen skjuler alt innholdet som overskrider boksområdet. Denne egenskapen skal håndteres med omhu fordi innholdet som denne egenskapen skjuler er helt usynlig for brukeren, men det er best egnet for å vise innhold som er dynamisk i naturen. Nedenfor er et eksempel på den skjulte verdien.

Produksjon

Innholdet som overskrider boksområdet har vært skjult.

Rulleverdi

Denne verdien skjuler innholdet som overskrider boksområdet inne i boksen og gir både vertikale og horisontale rullefelt for å se innholdet. Her er et eksempel.

Produksjon

Rullefeltene er lagt til.

Bilverdi

Denne verdien har en lignende funksjon som rulleverdien, men det som gjør den annerledes enn rulleverdien er at den legger til rullefelt i boksen bare når innholdet overskrider boksområdet. Dessuten vil det bare legge til typen rullefelt som kreves. Her er et eksempel.

Produksjon

Bilverdien av overløpsegenskaper som er vellykket brukt.

Overflow-X og Overflow-y

Dette er ytterligere to egenskaper som kontrollerer hva som skjer med det overfylte innholdet enten horisontalt eller vertikalt. Overflow-X-egenskapen kontrollerer innholdets horisontale oppførsel mens den overløps-og egenskapen bestemmer innholdets vertikale oppførsel. Her er et eksempel.

I eksemplet ovenfor har Overflow-X-egenskapen fått tildelt rulleverdi og overløp-y har blitt tildelt skjult verdi som et resultat av at innholdet som overskrider boksområdet, vil være skjult og boksen vil ha en vertikal rullefeltstang.

Produksjon

Konklusjon

Overløpsegenskapen brukes til å kontrollere oppførselen til innholdet som strømmer over det spesifiserte området til et element, dessuten er overløpsegenskapen bare designet for elementer på blokknivå. Den overløpsegenskapen gjengir fire verdier som er; synlig, bla, skjult og bil. Det er ytterligere to egenskaper som kontrollerer hva som skjer med det overfylte innholdet enten horisontalt eller vertikalt som er; Overflow-X og Overflow-y. Dette innlegget diskuterer overløpseiendommen i dybden ved hjelp av passende eksempler.