Overflow

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 41 von 76.

In CSS steuert die Eigenschaft overflow, was mit Inhalten passiert, die über die Box ihres Elements hinausgehen. Wenn der Inhalt eines Elements zu groß ist, um in die angegebene Breite und Höhe zu passen, bestimmt die Eigenschaft overflow, ob der Inhalt abgeschnitten wird, Scrollbalken hinzugefügt werden oder der überlaufende Inhalt außerhalb der Grenzen des Elements angezeigt wird.

Hier ist die grundlegende Syntax für die Verwendung der overflow-Eigenschaft:

selector {
    overflow: value;
}

value: Das gewünschte Überlaufverhalten, welches einer der folgenden Werte sein kann:

visible: Dies ist der Standardwert. Überlaufender Inhalt wird außerhalb der Box des Elements gerendert und kann angrenzende Elemente überlagern.

hidden: Überlaufender Inhalt wird abgeschnitten, und der Rest des Inhalts ist unsichtbar.

scroll: Fügt dem Element Bildlaufleisten (sowohl horizontal als auch vertikal) hinzu, sodass Benutzer durch den überlaufenden Inhalt scrollen können.

auto: Der Browser entscheidet basierend auf dem Inhalt und dem verfügbaren Platz, ob Scrollbalken hinzugefügt werden. Normalerweise werden Scrollbalken nur hinzugefügt, wenn sie notwendig sind.

Zum Beispiel:

div {
    width: 200px;
    height: 100px;
    overflow: scroll;
}

In diesem Beispiel werden allen <div>-Elementen mit einer Breite von 200px und einer Höhe von 100px Scrollbalken hinzugefügt, um überlaufenden Inhalt anzuzeigen.

Sie können das Überlaufverhalten für die horizontale und vertikale Richtung auch unabhängig voneinander mit den Eigenschaften overflow-x und overflow-y steuern:

.example {
    overflow-x: hidden; /* Horizontalen Überlauf ausblenden */
    overflow-y: scroll; /* Einen vertikalen Scrollbalken hinzufügen */
}

Aufgabe

Einfach

Sie erhalten ein HTML-Dokument mit einem Bereich (<div>), der einen Absatz (<p>) mit einem langen Text enthält. Ihre Aufgabe ist es, die Eigenschaft overflow zu verwenden, um zu steuern, wie der überlaufende Inhalt angezeigt wird. Befolgen Sie die folgenden Schritte:

Schreiben Sie eine CSS-Regel, die auf das <div>-Element abzielt. Setzen Sie die width auf 300px, die height auf 150px und die border auf 1px solid black.
Setzen Sie die Eigenschaft overflow des <div> auf scroll, um dem Element Scrollbalken hinzuzufügen.

Spickzettel

Die overflow-Eigenschaft steuert, was mit Inhalten passiert, die über die Box ihres Elements hinausgehen:

selector {
    overflow: value;
}

Overflow-Werte:

visible: Standard. Inhalt fließt über die Box des Elements hinaus
hidden: Überlaufender Inhalt wird abgeschnitten und ist unsichtbar
scroll: Fügt Bildlaufleisten hinzu (horizontal und vertikal)
auto: Der Browser fügt Bildlaufleisten nur bei Bedarf hinzu

Beispiel:

div {
    width: 200px;
    height: 100px;
    overflow: scroll;
}

Horizontalen und vertikalen Überlauf unabhängig voneinander steuern:

.example {
    overflow-x: hidden; /* Horizontalen Überlauf ausblenden */
    overflow-y: scroll; /* Vertikale Bildlaufleiste hinzufügen */
}

Probier es selbst

<html>
<head>
    <title>Overflow</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>
        <p>This is a long text that will likely overflow its container. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</body>
</html>