Überlauf

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

In CSS steuert die Eigenschaft overflow, was mit Inhalten geschieht, die über den Kasten ihres Elements hinauslaufen. 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, Bildlaufleisten hinzugefügt oder der überlaufende Inhalt außerhalb der Grenzen des Elements angezeigt wird.

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

selector {
    overflow: value;
}

value: Das gewünschte Überlaufverhalten, das eines der folgenden sein kann:

visible: Dies ist der Standardwert. Überlaufender Inhalt wird außerhalb der `box` des Elements dargestellt und kann benachbarte Elemente überlagern.

hidden: Überlaufender Inhalt wird abgeschnitten, und der restliche Inhalt 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 bestimmt anhand des Inhalts und des verfügbaren Platzes, ob Bildlaufleisten hinzugefügt werden. Normalerweise werden Bildlaufleisten nur bei Bedarf hinzugefügt.

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 Bildlaufleisten hinzugefügt, um überlaufenden Inhalt anzuzeigen.

Du kannst 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; /* Hide horizontal overflow */
    overflow-y: scroll; /* Add a vertical scrollbar */
}

Aufgabe

Einfach

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

Schreibe eine CSS-Regel, die auf das Element <div> abzielt. Setze die width auf 300px, die height auf 150px und den border auf 1px solid black.
Setze die Eigenschaft overflow des <div> auf scroll, um dem Element Bildlaufleisten hinzuzufü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>