Vlastnosť overflow

Vlastnosť overflow určuje prehliadaču, ako zaobchádzať s obsahom (text, obrázky, iné bloky), ktorý preteká cez hranice bloku (mimo jeho šírky alebo výšky). Prehliadač môže skryť pretekajúcu časť, pridať posuvníky alebo neurobiť nič (ponechať ako je - pretekajúce cez hranice).

Syntax

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

Hodnoty

Predvolená hodnota: visible.

Príklad . Hodnota visible

V tomto príklade sa veľmi dlhé slovo nezmestí do kontajnera a pretečie cez jeho hranice. K orezu nedochádza:

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

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

Результат:

Príklad . Hodnota visible

A teraz je obmedzená nielen šírka, ale aj výška (text pretečie cez blok aj výškou):

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;
}

Результат:

Príklad . Hodnota hidden

Teraz sa všetko, čo preteká cez hranice kontajnera jednoducho oreže (aj výškou). Dávajte pozor na to, že k orezaniu výšky dochádza iba vtedy, keď je explicitne zadaná. V opačnom prípade text rozširuje kontajner výškou - a k žiadnemu orezaniu nedôjde:

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;
}

Результат:

Príklad . Hodnota scroll

Pri hodnote scroll budú posuvníky vždy, aj keď nič nepreteká (v tomto prípade budú neaktívne). Teraz text nepreteká ani šírkou, ani výškou, ale posuvníky sú aj tak (neaktívne):

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;
}

Результат:

Príklad . Hodnota auto

Pri hodnote auto sa posuvníky pridajú iba vtedy, ak obsah preteká cez kontajner. Teraz nie sú, pretože všetko sa zmestí:

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;
}

Результат:

Príklad . Hodnota auto

A teraz obmedzíme šírku - objaví sa horizontálny posuvník:

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;
}

Результат:

Pozri tiež