CSS Overflow

A CSS <overflow> tulajdonság szabályozza, mi történik, ha egy elem tartalma meghaladja a megadott szélességet vagy magasságot. Segítségével beállíthatjuk, hogy a túlcsorduló tartalom elrejtődjön, görgetősáv jelenjen meg, vagy automatikusan alkalmazkodjon a helyzethez.

Az overflow alapjai

Az <overflow> tulajdonság négy fő értéket vehet fel: visible (alapértelmezett, tartalom kilóg), hidden (a kilógó tartalom elrejtődik), scroll (mindig görgetősáv jelenik meg), és auto (csak akkor jelenik meg a görgetősáv, ha szükséges).

Az alábbi példában a tartalom kilógna a dobozból, de az <overflow: hidden;> beállítás elrejti a felesleget:

Overflow értékek összehasonlítása

A hidden, scroll és auto különböző megoldásokat nyújtanak a tartalom kezelésére. A scroll mindig megjeleníti a görgetősávot, míg az auto csak akkor, ha tényleg szükséges.

Axis-specifikus beállítások

Az <overflow-x> és <overflow-y> tulajdonságokkal külön szabályozhatjuk a vízszintes és függőleges túlcsordulást. Ez akkor hasznos, ha például csak vízszintesen szeretnénk görgetést engedélyezni.

Overflow inline elemeknél

Az overflow nem csak block elemeknél számít: inline-block elemeknél is kezelhetjük a túlcsordulást.

Overflow és Flexbox

Flexbox elrendezésnél az overflow biztosítja, hogy a túl nagy elemek görgethetőek maradjanak.

Text-overflow: ellipsis

A text-overflow: ellipsis beállítással a túl hosszú szöveg három ponttal (...) lesz lerövidítve, ha nem fér el a dobozban.

Tippek az overflow használatához

Az overflow helyes használata segít elkerülni a váratlan elrendezési problémákat és a tartalom átláthatóságát is növeli:

• Mindig ellenőrizd, hogyan viselkedik a tartalom különböző képernyőméreteken.
• Használj <overflow: auto;> a felhasználói élmény javítása érdekében, hogy ne legyen felesleges görgetősáv.
• Az axis-specifikus beállításokkal pontosan szabályozhatod a görgetés irányát.