CSS Overflow

Svojstvo CSS overflow specificira šta da se radi u slučaju da je sadržaj prevelik da stane u okvir kontejnera. Određuje da li bi trebalo da se pojavi traka za pomeranje ili da li se sadržaj iseče.

Svojstvo overflow je skraćenica za overflow-x i overflow-y. Svojstvo overflow-x specificira rukovanje prelivom u horizontalnom smeru, dok overflow-y specificira rukovanje prelivom u vertikalnom smeru.

Kada učite o ovome, korisno je znati nešto više o pozicioniranju.

Vrednosti

Svojstvo overflow može imati različite vrednosti:

visible - sadržaj se može prikazati izvan okvira,
hidden - sadržaj se iseče i ne prikazuju se trake za pomeranje,
scroll - sadržaj se iseče i prikazuju se neophodne trake za pomeranje,
auto - pregledač određuje kako će postupati sa sadržajem, može se razlikovati od pregledača do pregledača, ali uglavnom se klizači pojavljuju po potrebi.

Svojstvo overflow odnosi se samo na block, inline-block i elemente tabele.

Sintaksa

Sledeća sintaksa se koristi da se definiše overflow svojstvo:

Svojstvo overflov može imati različite vrednosti:

div {
  overflow: hidden;
}

Primeri

Vratimo ovu teoriju na nekoliko primera. Kada radite sa tekstom, trebalo bi da ima odgovarajuće oblikovanje.

HTML

<div>
  <p>Lorem ipsum dolor amet next level banh mi actually etsy craft beer. Portland meh palo santo pitchfork wayfarers raclette kinfolk try-hard YOLO. Lo-fi cred pork belly, cloud bread artisan heirloom raw denim kombucha. Godard etsy ugh, letterpress roof party fingerstache succulents edison bulb. Iceland disrupt palo santo fixie hella taiyaki celiac green juice.</p>
</div>

CSS

div {
  height: 200px;
  width: 200px;
  border: solid thin blue;
  background-color: #fafafa;
  overflow: visible;
}

U gornjem primeru smo postavili preliv na vidljiv i sadržaj se prosipa izvan okvira.

HTML

<div>
  <p>Lorem ipsum dolor amet next level banh mi actually etsy craft beer. Portland meh palo santo pitchfork wayfarers raclette kinfolk try-hard YOLO. Lo-fi cred pork belly, cloud bread artisan heirloom raw denim kombucha. Godard etsy ugh, letterpress roof party fingerstache succulents edison bulb. Iceland disrupt palo santo fixie hella taiyaki celiac green juice.</p>
</div>

CSS

div {
  height: 200px;
  width: 200px;
  border: solid thin blue;
  background-color: #fafafa;
  overflow: hidden;
}

U drugom primeru smo svojstvo overflow postavili na hidden. Sadržaj je isečen i nisu vidljive trake za pomeranje.

HTML

<div>
  <p>Lorem ipsum dolor amet next level banh mi actually etsy craft beer. Portland meh palo santo pitchfork wayfarers raclette kinfolk try-hard YOLO. Lo-fi cred pork belly, cloud bread artisan heirloom raw denim kombucha. Godard etsy ugh, letterpress roof party fingerstache succulents edison bulb. Iceland disrupt palo santo fixie hella taiyaki celiac green juice.</p>
</div>

CSS

div {
  height: 200px;
  width: 200px;
  border: solid thin blue;
  background-color: #fafafa;
  overflow: scroll;
}

U trećem primeru postavili smo svojstvo overflow na scroll. U ovom slučaju, sadržaj se prosipa izvan kontejnera i pojavljuju se klizači.

HTML

<div>
  <p>Lorem ipsum dolor amet next level banh mi actually etsy craft beer. Portland meh palo santo pitchfork wayfarers raclette kinfolk try-hard YOLO. Lo-fi cred pork belly, cloud bread artisan heirloom raw denim kombucha. Godard etsy ugh, letterpress roof party fingerstache succulents edison bulb. Iceland disrupt palo santo fixie hella taiyaki celiac green juice.</p>
</div>

CSS

div {
  height: 200px;
  width: 200px;
  border: solid thin blue;
  background-color: #fafafa;
  overflow-y: scroll;
  overflow-x: hidden;
}

Konačno, možemo videti upotrebu svojstva overflov-y.Vidimo da je vidljiva samo vertikalna traka za pomicanje, dok je vodoravna traka za pomicanje skrivena.

Sažetak

U ovom kratkom uputstvu objasnili smo svojstvo overflow. Nadam se da će vam biti od pomoći kada započnete sledeći projekat.

Hvala vam za čitanje!

Želite li znati više o CSS-u? Drago nam je što delimo - samo se pretplatite na naš bilten.