Comment Flexbox affecte-t-il le comportement « overflow-wrap : break-word » ?

Impact de Flexbox sur Overflow-Wrap

Dans le domaine du CSS, les propriétés overflow-wrap et display interagissent pour régir le comportement du texte contenu enveloppant et débordant. Explorons une bizarrerie intéressante observée dans un scénario spécifique.

Considérez l'extrait de code suivant :

<code class="html"><div class="wrap">
  <div class="a">
    first div
  </div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal
    animal animal animal animal animal animal animal animal animal animal animal animal
  </div>
</div></code>

Avec overflow-wrap : break-word appliqué, le texte dans le deuxième div, . b, devrait être divisé en plusieurs lignes, comme démontré dans le premier extrait.

Cependant, les choses prennent une tournure inattendue lorsque nous ajoutons display: flex au conteneur wrap :

<code class="html"><div class="wrap">
  <div class="a">
    first div
  </div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal
    animal animal animal animal animal animal animal animal animal animal animal animal
  </div>
</div></code>

Dans ce Dans ce scénario, une barre de défilement horizontale apparaît, rendant le texte illisible au-delà d'un certain point. Comment rectifier ce comportement sans recourir au débordement : caché ?

La solution réside dans la compréhension de la manière dont flexbox affecte ses enfants. Par défaut, lorsqu'un conteneur a display: flex, ses éléments enfants sont automatiquement positionnés dans une ligne ou une colonne, selon la propriété flex-direction.

Dans notre cas, lorsque display: flex est appliqué au wrap conteneur, les divs a et b sont disposés horizontalement, comme prévu. Cependant, la propriété min-width des enfants flexbox est par défaut auto, ce qui signifie que chaque div occupera la largeur minimale nécessaire pour accueillir son contenu.

Pour résoudre le problème, nous devons définir explicitement la min-width du b div à 0 :

<code class="css">.wrap {
  overflow-wrap: break-word;
  display: flex;
}

.b {
  min-width: 0;
}</code>

Ce faisant, nous garantissons que le b div peut s'étendre pour s'adapter à la largeur disponible du conteneur, éliminant la barre de défilement horizontale et permettant au texte de se diviser en plusieurs lignes comme prévu .

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!