Testez vos compétences : Débordement

Débordement n°1

Dans cette tâche, le contenu déborde de la boîte, car elle a une hauteur fixe.

Pour compléter la tâche :

1. Mettez à jour le CSS afin que la hauteur de la boîte soit maintenue et que les barres de défilement n'apparaissent que lorsqu'il y a suffisamment de texte pour provoquer un débordement.
2. Testez votre solution en supprimant du texte dans le HTML et en vérifiant qu'aucune barre de défilement n'apparaît lorsqu'il n'y a qu'une petite quantité de texte.

Le point de départ de la tâche ressemble à ceci :

Voici le code sous-jacent pour ce point de départ :

<div class="boite">
  <p>
    Les légumes, c'est un plus pour vous, c'est pourquoi je vous demande de
    mettre davantage de chou-rave, ciboulette, daikon, amarante, tatsoi,
    tomatillo, melon, haricots azuki, ail.
  </p>

  <p>
    Feuilles de betterave, maïs, soko, endive, courge à gumbo. Persil, échalote,
    courgette, tatsoi, pousses de pois, fèves, chou vert, pissenlit, gombo,
    wakamé, tomate. Pissenlit, concombre, arachide, pois, cacahuète, soko,
    courgette.
  </p>
</div>

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

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

Le style mis à jour doit ressembler à ceci :

.boite {
  overflow: auto;
}

Débordement n°2

Dans cette tâche, il y a une image dans la boîte qui est plus grande que les dimensions de la boîte, de sorte qu'elle déborde visiblement. Mettez à jour le CSS afin que toute image en dehors de la boîte soit masquée.

Le point de départ de la tâche ressemble à ceci :

Voici le code sous-jacent pour ce point de départ :

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

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

Le style mis à jour doit ressembler à ceci :

.boite {
  overflow: hidden;
}

• Précédent
• Aperçu : Bases de la mise en forme CSS
• Suivant