Wie wirkt sich Flexbox auf das Verhalten von „overflow-wrap: break-word“ aus?

Auswirkungen von Flexbox auf Overflow-Wrap

Im Bereich von CSS interagieren die Eigenschaften overflow-wrap und display, um das Verhalten von Text zu steuern Verpackung und überlaufender Inhalt. Lassen Sie uns eine interessante Eigenart untersuchen, die in einem bestimmten Szenario beobachtet wurde.

Betrachten Sie den folgenden Codeausschnitt:

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

Mit overflow-wrap: break-word angewendet, der Text innerhalb des zweiten div, . b, sollte in mehrere Zeilen aufgeteilt werden, wie im ersten Snippet gezeigt.

Die Dinge nehmen jedoch eine unerwartete Wendung, wenn wir display:flex zum Wrap-Container hinzufügen:

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

Hier In diesem Szenario wird eine horizontale Bildlaufleiste angezeigt, die den Text ab einem bestimmten Punkt unleserlich macht. Wie können wir dieses Verhalten korrigieren, ohne auf overflow:hidden zurückzugreifen?

Die Lösung liegt darin, zu verstehen, wie sich Flexbox auf seine untergeordneten Elemente auswirkt. Wenn ein Container display:flex hat, werden seine untergeordneten Elemente standardmäßig automatisch in einer Zeile oder Spalte positioniert, abhängig von der Eigenschaft „flex-direction“.

In unserem Fall wird display:flex auf den Wrap angewendet Im Container sind die Divs a und b erwartungsgemäß horizontal angeordnet. Allerdings ist die Eigenschaft „min-width“ von untergeordneten Flexbox-Elementen standardmäßig auf „Auto“ eingestellt, was bedeutet, dass jedes Div die erforderliche Mindestbreite für seinen Inhalt einnimmt.

Um das Problem zu beheben, müssen wir die minimale Breite explizit festlegen des B-Divs auf 0:

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

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

Auf diese Weise stellen wir sicher, dass das B-Div so erweitert werden kann, dass es der verfügbaren Breite des Containers entspricht, wodurch die horizontale Bildlaufleiste entfällt und der Text wie vorgesehen in mehrere Zeilen aufgeteilt werden kann .

Das obige ist der detaillierte Inhalt vonWie wirkt sich Flexbox auf das Verhalten von „overflow-wrap: break-word“ aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!