Testen Sie Ihre Fähigkeiten: Overflow

Aufgabe 1

In dieser Aufgabe läuft der Inhalt über den Rand der Box hinaus, da sie eine feste Höhe hat.

Um die Aufgabe abzuschließen:

1. Aktualisieren Sie das CSS so, dass die Höhe beibehalten wird und die Box nur dann Scrollleisten hat, wenn genügend Text vorhanden ist, um ein Überlaufen zu verursachen.
2. Testen Sie Ihre Lösung, indem Sie etwas Text aus dem HTML entfernen und überprüfen, ob, wenn nur eine kleine Menge Text vorhanden ist, die nicht überläuft, keine Scrollleiste erscheint.

Ihr Endergebnis sollte wie das folgende Bild aussehen:

<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;
}

.box {
  overflow: auto;
}

Aufgabe 2

In dieser Aufgabe befindet sich ein Bild in der Box, das größer als die Abmessungen der Box ist, sodass es sichtbar überläuft. Aktualisieren Sie das CSS so, dass jedes Bild außerhalb der Box ausgeblendet wird.

Ihr Endergebnis sollte wie das folgende Bild aussehen:

<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;
}

.box {
  overflow: hidden;
}

• Zurück
• Übersicht: Grundlegende Informationen zur CSS-Gestaltung
• Weiter