overflow property controlează ce se întâmplă dacă conținutul unui element se revarsă din lățimea și înălțimea setate. Este o prescurtare pentru overflow-x și overflow-y proprietăți. Rețineți că această proprietate funcționează numai pentru elementele de bloc cu o înălțime specificată.

Cu overflow, puteți controla dacă să decupați conținutul sau să adăugați bare de derulare atunci când conținutul unui element este prea mare pentru a se potrivi într-o zonă specificată.

Conţinut

Valori

  • visible: Aceasta este valoarea implicită a proprietății. Niciun conținut nu este decupat atunci când este mai mare decât dimensiunile stabilite.
  • hidden: Conținutul care se revarsă este ascuns.
  • scroll: Conținutul este ascuns, dar utilizatorii pot totuși derula și vizualiza conținutul ascuns.
  • auto: Dacă conținutul este mai mare decât dimensiunile stabilite, conținutul va fi ascuns automat și va apărea o bară de derulare.
  • initial: Folosește valoarea implicită pentru această proprietate, visible.
  • inherit: Folosește valoarea de revărsare a elementului părinte.

Exemple

Iată HTML și CSS pe care le vom folosi pentru toate exemplele următoare:

<div class="box-element">
  <p>
    Who's the baby cats are fats i like to pets them they like to meow back. Attack the dog then pretend like nothing happened kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff, see owner, run in terror. Rub face on everything cats are the world. Meow meow, i tell my human i rule on my back you rub my tummy i bite you hard the best thing in the universe is a cardboard box if it smells like fish eat as much as you wish and carefully drink from water glass and then spill it everywhere and proceed to lick the puddle. Paw at beetle and eat it before it gets away rub butt on table for chew foot, or love you, then bite you and pounce on unsuspecting person. What a cat-ass-trophy! cat slap dog in face let me in let me out let me in let me out let me in let me out who broke this door anyway for prance along on top of the garden fence, annoy the neighbor's dog and make it bark and chew iPad power cord purr.
  <p>
</div>
.box-element {
  width: 400px;
  height: 200px;
  border: dashed;
}

.box-element {
  /* overflow will be set here */
}

Vizibil:

.box-element {
  overflow: visible;
}
Overflow CSS explicat cu

Ascuns:

.box-element { 
  overflow: hidden; 
}
1612038425 546 Overflow CSS explicat cu

Sul:

.box-element { 
  overflow: scroll; 
}
1612038426 384 Overflow CSS explicat cu

Auto:

.box-element { 
  overflow: auto; 
}
1612038426 995 Overflow CSS explicat cu

overflow-x și overflow-y

  • overflow-x: Permite utilizatorului să deruleze conținutul care se extinde dincolo de înălțimea elementului casetă.
  • overflow-y: Permite utilizatorului să deruleze conținutul care se extinde dincolo de lățimea casetei.
.box-element {
  overflow-x: scroll;
  overflow-y: auto;
}

Si .box-element va arăta astfel:

1612038427 949 Overflow CSS explicat cu

Dacă conținutul depășește axa Y, atunci acel conținut va fi ascuns, în timp ce o bară de derulare ar trebui să fie vizibilă pentru ca utilizatorii să citească restul conținutului.

ad-banner