Wie wirkt sich Flexbox auf das „Overflow-Wrap'-Verhalten aus und wie können wir es beheben?

Auswirkungen von Flexbox auf das Overflow-Wrap-Verhalten

In CSS ermöglicht die Overflow-Wrap-Eigenschaft, dass Text in mehrere Zeilen aufgeteilt wird, wenn er auf a trifft Zeilenumbruchzeichen. Dies ermöglicht ein flexibleres Textlayout und verhindert, dass lange Zeilen den Container überfüllen. In Kombination mit der Eigenschaft display: flex kann overflow-wrap jedoch unerwartetes Verhalten zeigen.

Problem:

Beachten Sie den folgenden Codeausschnitt, in dem overflow-wrap: break auftritt -word wird auf einen Container mit zwei untergeordneten Elementen angewendet:

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

Wenn Overflow-Wrap aktiviert ist, sollte der Text im zweiten untergeordneten Element wie erwartet in mehrere Zeilen aufgeteilt werden. Wenn jedoch display:flex zum Container hinzugefügt wird, erscheint trotz der Overflow-Wrap-Einstellung eine horizontale Bildlaufleiste.

Lösung:

Um die horizontale Bildlaufleiste zu entfernen, muss die Die Standardeigenschaft „min-width“ der untergeordneten Flexbox-Elemente muss überschrieben werden. Wenn Sie „min-width“ auf 0 setzen, wird die Breite der untergeordneten Elemente verkleinert, um sie an ihren Inhalt anzupassen, sodass sie nicht über den Container hinauslaufen.

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

.b {
  min-width: 0;
}

Mit dieser Anpassung wird der lange Text im zweiten untergeordneten Element umbrochen auf mehrere Zeilen, ohne dass eine horizontale Bildlaufleiste entsteht. Dies zeigt, dass display:flex zwar das Verhalten anderer CSS-Eigenschaften beeinflussen kann, aber dennoch in Kombination mit overflow-wrap verwendet werden kann, um gewünschte Textlayouts zu erreichen.

Das obige ist der detaillierte Inhalt vonWie wirkt sich Flexbox auf das „Overflow-Wrap'-Verhalten aus und wie können wir es beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!