Az overflow tulajdonság

Az overflow tulajdonság megadja a böngészőnek, hogyan kezelje a blokk határain (szélességén vagy magasságán) kívülre nyúló tartalmat (szöveg, képek, más blokkok). A böngésző elrejtheti a kiálló részt, görgetősávokat adhat hozzá, vagy nem csinál semmit (így hagyja, hogy kiálljon a határokon túl).

Szintaxis

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

Értékek

Alapértelmezett érték: visible.

Példa . Visible érték

Ebben a példában egy nagyon hosszú szó nem fér el a tárolóban, és ki fog nyúlni a határain túl. Nem fog levágódni:

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

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

Результат:

Példa . Visible érték

Most nem csak a szélesség, hanem a magasság is korlátozva van (a szöveg a blokk fölött is ki fog nyúlni):

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

Результат:

Példa . Hidden érték

Most minden, ami a tároló határain túlnyúlik, egyszerűen levágódik (a magasságnál is). Figyelj arra, hogy a magasság szerinti vágás csak akkor történik meg, ha az explicit meg van adva. Ellenkező esetben a szöveg magasságban kitágítja a tárolót - és nem történik levágás:

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

Результат:

Példa . Scroll érték

A scroll értéknél a görgetősávok mindig megjelennek, még akkor is, ha semmi nem nyúl ki (ebben az esetben inaktívak lesznek). Most a szöveg nem nyúlik ki sem szélességben, sem magasságban, de a görgetősávok mégis megvannak (inaktívak):

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

Результат:

Példa . Auto érték

A auto értéknél a görgetősávok csak akkor jelennek meg, ha a tartalom kilóg a tárolóból. Most nincsenek, mert minden elfér:

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

Результат:

Példa . Auto érték

Most korlátozzuk a szélességet - vízszintes görgetősáv jelenik meg:

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

Результат:

Lásd még