Lastnost overflow

Lastnost overflow določa brskalniku, kako ravnati z vsebino (besedilo, slike, drugi bloki), ki štrli iz meja bloka (izven njegove širine ali višine). Brskalnik lahko skrije štrleči del, doda drsnike ali ne naredi nič (pusti tako, kot je - štrleče iz meja).

Sintaksa

cssselektor {
  overflow: hidden | scroll | auto | visible;
}

Vrednosti

Privzeta vrednost: visible.

Primer . Vrednost visible

V tem primeru se zelo dolga beseda ne bo prilegala v vsebnik in bo štrlela iz njegovih meja. Do obrezovanja ne pride:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: visible;
  border: 1px solid red;
  width: 200px;
}

Результат:

Primer . Vrednost visible

Tokrat ni omejena le širina, temveč tudi višina (besedilo bo štrlelo iz bloka tudi po višini):

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  width: 200px;
  height: 40px;
  overflow: visible;
  border: 1px solid red;
  margin-bottom: 20px;
}

Результат:

Primer . Vrednost hidden

Tokrat bo vse, kar štrli iz mej vsebnika, preprosto obrezano (tudi po višini). Bodite pozorni na to, da se obrezovanje po višini zgodi le, če je ta eksplicitno določena. V nasprotnem primeru besedilo razširi vsebnik po višini - in do obrezovanja ne bo prišlo:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: hidden;
  width: 200px;
  height: 40px;
  border: 1px solid red;
}

Результат:

Primer . Vrednost scroll

Pri vrednosti scroll bodo drsniki vedno prisotni, tudi če nič ne štrli (v tem primeru bodo neaktivni). Tokrat besedilo ne štrli ne po širini, ne po višini, vendar so drsniki kljub temu prisotni (neaktivni):

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: scroll;
  width: 400px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Primer . Vrednost auto

Pri vrednosti auto se drsniki dodajo le, če vsebina štrli iz vsebnika. Tokrat jih ni, saj se vse prilega:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: auto;
  width: 400px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Primer . Vrednost auto

Tokrat pa omejimo širino - pojavil se bo vodoravni drsnik:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: auto;
  height: 100px;
  border: 1px solid red;
}

Результат:

Glejte tudi