Kapitel 16: Überlauf (Overflow)

Was passiert, wenn Inhalt größer ist als sein Container? Hier kommt overflow ins Spiel!

16.1 Überlauf-Eigenschaft (overflow)

overflow steuert, was passiert, wenn Inhalt den verfügbaren Bereich übersteigt.

📝 Syntax

selektor {
    overflow: wert;
}

🔄 Mögliche Werte

Wert	Beschreibung
visible (Standard)	Inhalt wird nicht abgeschnitten (kann aus dem Container herausragen)
hidden	Überlaufender Inhalt wird versteckt (abgeschnitten)
scroll	Immer Rollbalken anzeigen (auch wenn nicht nötig)
auto	Automatisch Rollbalken anzeigen (nur wenn nötig - empfohlen!)

🎯 Beispiele

/* Überlauf verstecken (häufig verwendet!) */
.hidden-overflow {
    width: 300px;
    height: 200px;
    overflow: hidden;
    border: 1px solid #cccccc;
}

/* Immer Rollbalken anzeigen */
.scroll-overflow {
    width: 300px;
    height: 200px;
    overflow: scroll;
    border: 1px solid #cccccc;
}

/* Automatisch Rollbalken anzeigen (empfohlen!) */
.auto-overflow {
    width: 300px;
    height: 200px;
    overflow: auto;
    border: 1px solid #cccccc;
}

16.2 Horizontaler/Vertikaler Überlauf (overflow-x, overflow-y)

Sie können horizontalen und vertikalen Überlauf getrennt steuern!

📝 Syntax

selektor {
    overflow-x: wert; /* Horizontaler Überlauf */
    overflow-y: wert; /* Vertikaler Überlauf */
}

🎯 Beispiele

/* Nur vertikalen Überlauf steuern (Rolbalken nur vertikal) */
.vertical-scroll {
    width: 300px;
    height: 200px;
    overflow-x: hidden; /* Horizontalen Überlauf verstecken */
    overflow-y: auto;   /* Vertikalen Überlauf automatisch */
    border: 1px solid #cccccc;
}

/* Nur horizontalen Überlauf steuern (Rolbalken nur horizontal) */
.horizontal-scroll {
    width: 300px;
    height: 200px;
    overflow-x: auto;   /* Horizontalen Überlauf automatisch */
    overflow-y: hidden; /* Vertikalen Überlauf verstecken */
    border: 1px solid #cccccc;
    white-space: nowrap; /* Text in einer Zeile (für horizontalen Überlauf) */
}

16.3 Textüberlauf (text-overflow)

text-overflow steuert, wie überlaufender Text angezeigt wird (z.B. "..." am Ende).

📝 Syntax

selektor {
    text-overflow: wert;
}

🔄 Mögliche Werte

Wert	Beschreibung
clip (Standard)	Text wird abgeschnitten (keine Auszeichnung)
ellipsis	Text wird mit "..." (Auslassungspunkte) abgeschnitten

⚠️ Wichtig!

text-overflow: ellipsis; funktioniert nur, wenn:

1. overflow nicht visible ist (meistens hidden oder auto)
2. white-space: nowrap; (Text bleibt in einer Zeile)
3. width festgelegt ist

🎯 Beispiele

/* Text mit "..." abschneiden (einzeilig) */
.single-line-ellipsis {
    width: 200px;          /* Breite festlegen */
    white-space: nowrap;   /* Text in einer Zeile */
    overflow: hidden;        /* Überlauf verstecken */
    text-overflow: ellipsis; /* "..." anzeigen */
    border: 1px solid #cccccc;
}

/* Text mit "..." abschneiden (mehrzeilig - moderne Methode) */
.multi-line-ellipsis {
    width: 200px;          /* Breite festlegen */
    display: -webkit-box;
    -webkit-line-clamp: 3;  /* Max. 3 Zeilen */
    -webkit-box-orient: vertical;
    overflow: hidden;        /* Überlauf verstecken */
    text-overflow: ellipsis; /* "..." anzeigen */
}

16.4 Anfänger-Tipps: overflow:hidden vs. Positionierung, Float-Kompatibilität

❌ Problem 1: overflow: hidden; schneidet absolut positionierte Elemente ab

Problem: Wenn ein Elternelement overflow: hidden; hat, werden absolut positionierte Kinder-Elemente abgeschnitten, wenn sie außerhalb liegen.

Lösung:

/* Methode 1: overflow auf dem Elternelement entfernen */
.parent {
    /* overflow: hidden; entfernen */
    position: relative; /* Bezugspunkt für absolute Positionierung */
}

.child {
    position: absolute;
    top: -20px; /* Außerhalb des Containers */
    left: 20px;
}

/* Methode 2: overflow: visible; setzen */
.parent {
    overflow: visible; /* Nicht abschneiden */
}

❌ Problem 2: overflow: hidden; löst Float-Collapse (kann aber nützlich sein!)

Problem: overflow: hidden; auf einem Elternelement löst Float-Collapse (siehe Kapitel 11).

Erklärung: Da overflow: hidden; den Block-Formatierungs-Kontext erstellt, muss der Container die Höhe seiner "schwebenden" Kinder berechnen, um zu wissen, wo der Abschnitt abgeschnitten werden soll.

Lösung (nicht mehr empfohlen, verwenden Sie clearfix oder Flexbox/Grid!):

/* Float-Collapse beheben mit overflow: hidden; */
.parent {
    overflow: hidden; /* Float-Collapse beheben! */
    background-color: lightblue;
}

.child {
    float: left;
    width: 100px;
    height: 100px;
    background-color: yellow;
    margin-right: 10px;
}

16.5 Praxis: Text mit "...", Container mit Rollbalken

Lassen Sie uns das Gelernte in praktischen Beispielen anwenden!

🎯 Beispiel 1: Text mit "..." abschneiden (einzeilig)

HTML (index.html):

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text mit "..." abschneiden</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card">
        <h3 class="truncate-text">Dies ist ein sehr langer Titel, der abgeschnitten werden soll</h3>
        <p>Dies ist ein normaler Absatz.</p>
    </div>
</body>
</html>

CSS (style.css):

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    padding: 40px 20px;
    background-color: #f0f0f0;
}

/* Karte */
.card {
    max-width: 400px;
    margin: 0 auto;
    background-color: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Titel der Karte */
.card h3 {
    color: #333333;
    margin-bottom: 15px;
    font-size: 1.5rem;
}

/* Text mit "..." abschneiden */
.truncate-text {
    width: 100%;          /* Volle Breite des Elternelements */
    white-space: nowrap;   /* Text in einer Zeile */
    overflow: hidden;        /* Überlauf verstecken */
    text-overflow: ellipsis; /* "..." anzeigen */
}

🎯 Beispiel 2: Container mit Rollbalken

HTML (index.html):

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Container mit Rollbalken</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="scrollable-container">
        <p>Dies ist ein langer Text, der einen Rollbalken erfordert. Dies ist ein langer Text, der einen Rollbalken erfordert. Dies ist ein langer Text, der einen Rollbalken erfordert.</p>
        <p>Noch ein Absatz. Noch ein Absatz. Noch ein Absatz.</p>
        <p>Noch ein Absatz. Noch ein Absatz. Noch ein Absatz.</p>
        <p>Noch ein Absatz. Noch ein Absatz. Noch ein Absatz.</p>
        <p>Noch ein Absatz. Noch ein Absatz. Noch ein Absatz.</p>
    </div>
</body>
</html>

CSS (style.css):

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    padding: 40px 20px;
    background-color: #f0f0f0;
}

/* Scrollbarer Container */
.scrollable-container {
    max-width: 400px;
    height: 300px;          /* Höhe festlegen (wichtig!) */
    margin: 0 auto;
    background-color: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    
    /* Überlauf steuern (empfohlene Methode!) */
    overflow: auto;          /* Automatisch Rollbalken anzeigen */
    
    /* Oder: */
    /* overflow-y: auto; */ /* Nur vertikalen Rollbalken */
}

/* Text innerhalb des Containers */
.scrollable-container p {
    color: #666666;
    line-height: 1.6;
    margin-bottom: 15px;
}

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ overflow-Eigenschaft (visible, hidden, scroll, auto)
• ✅ Horizontalen/Vertikalen Überlauf steuern (overflow-x, overflow-y)
• ✅ Textüberlauf (text-overflow: ellipsis;)
• ✅ Wie man overflow: hidden; mit Positionierung und Float kombiniert
• ✅ Praktische Beispiele: Text mit "...", Container mit Rollbalken

🎯 Nächste Schritte

Im nächsten Kapitel werden wir:

1. Media Queries erlernen (Responsives Design)
2. Geräteabmessungen anpassen
3. Praktische Projekte zur responsiven Gestaltung erstellen

Bereit für mehr? Los geht's! 🎨