Testen Sie Ihr Können: Überlauf

Überlauf 1

In dieser Aufgabe überfließt der Inhalt das Kästchen, weil es eine feste Höhe hat.

Um die Aufgabe zu vervollständigen:

1. Aktualisieren Sie das CSS, damit die Höhe des Kästchens beibehalten wird und Scrollleisten nur dann erscheinen, wenn genug Text vorhanden ist, um einen Überlauf zu verursachen.
2. Testen Sie Ihre Lösung, indem Sie etwas Text aus dem HTML entfernen und prüfen, dass keine Scrollleiste erscheint, wenn nur wenig Text vorhanden ist.

Der Ausgangspunkt der Aufgabe sieht folgendermaßen aus:

Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:

<div class="box">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>

  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}

.box {
  border: 5px solid black;
  padding: 1em;
  height: 200px;
  width: 300px;
}

Die aktualisierte Gestaltung sollte folgendermaßen aussehen:

.box {
  overflow: auto;
}

Überlauf 2

In dieser Aufgabe befindet sich ein Bild im Kästchen, das größer ist als die Dimensionen des Kästchens, sodass es sichtbar überläuft. Aktualisieren Sie das CSS so, dass jedes Bild, das außerhalb des Kästchens liegt, verborgen wird.

Der Ausgangspunkt der Aufgabe sieht folgendermaßen aus:

Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:

<div class="box">
  <img
    alt="flowers"
    src="https://mdn.github.io/shared-assets/images/examples/flowers.jpg" />
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
.box {
  border: 5px solid black;
  height: 200px;
  width: 300px;
}

Die aktualisierte Gestaltung sollte folgendermaßen aussehen:

.box {
  overflow: hidden;
}

• Zurück
• Übersicht: Grundlagen der CSS-Gestaltung
• Weiter