Comment Flexbox affecte-t-il le comportement « overflow-wrap » et comment pouvons-nous y remédier ?

Impact de Flexbox sur le comportement de débordement-wrap

En CSS, la propriété overflow-wrap permet au texte de se diviser en plusieurs lignes lorsqu'il rencontre un caractère de saut de ligne. Cela permet une mise en page du texte plus flexible et empêche les longues lignes de déborder du conteneur. Cependant, lorsqu'il est combiné avec la propriété display: flex, overflow-wrap peut présenter un comportement inattendu.

Problème :

Considérez l'extrait suivant, où overflow-wrap: break -word est appliqué à un conteneur avec deux éléments enfants :

<div class="wrap">
  <div class="a">
    first div
  </div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal 
    ... (very long text)
  </div>
</div>

Lorsque le débordement est activé, le texte du deuxième élément enfant doit être divisé en plusieurs lignes comme prévu. Cependant, lorsque display: flex est ajouté au conteneur, une barre de défilement horizontale apparaît malgré le paramètre overflow-wrap.

Solution :

Pour éliminer la barre de défilement horizontale, la La propriété min-width par défaut des éléments enfants flexbox doit être remplacée. En définissant min-width sur 0, la largeur des éléments enfants sera réduite pour s'adapter à leur contenu, les empêchant ainsi de déborder du conteneur.

.wrap {
  overflow-wrap: break-word;
  display: flex;
}

.b {
  min-width: 0;
}

Avec cet ajustement, le texte long du deuxième élément enfant sera renvoyé à la ligne. sur plusieurs lignes sans provoquer de barre de défilement horizontale. Cela démontre que même si display: flex peut affecter le comportement d'autres propriétés CSS, il peut toujours être utilisé en combinaison avec overflow-wrap pour obtenir la mise en page de texte souhaitée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!