Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Warum funktioniert „overflow-wrap: break-word' nicht wie erwartet, wenn es in einem Flexbox-Container verwendet wird?

Mary-Kate Olsen
Freigeben: 2024-11-02 10:04:30
Original
956 Leute haben es durchsucht

Why doesn't `overflow-wrap: break-word` work as expected when used within a flexbox container?

Flexbox beeinflusst das Overflow-Wrap-Verhalten

Frage:

Warum funktioniert im folgenden Code die Overflow-Wrap-Eigenschaft? Verhalten sich in Kombination mit display: flex nicht wie erwartet?

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

<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>
Nach dem Login kopieren

Antwort:

Wenn Sie display:flex zum Wrap-Element hinzufügen, wird es zu einem Flexbox-Container . Standardmäßig sind die Elemente in einem Flexbox-Container in einer einzigen Zeile ausgerichtet. Allerdings ist die Eigenschaft „min-width“ von untergeordneten Flexbox-Elementen standardmäßig auf „auto“ eingestellt, sodass sie die erforderliche Mindestbreite einnehmen, um ihren Inhalt aufzunehmen.

Im bereitgestellten Code bedeutet dies, dass die Elemente a und b vorhanden sind gestreckt, um ihrem Inhalt gerecht zu werden. Da Element b einen sehr langen Textinhalt hat, wird die Anzeige einer horizontalen Bildlaufleiste erzwungen.

Um dieses Problem zu beheben, können Sie die Mindestbreite von Element b auf 0 setzen. Dadurch kann es verkleinert werden, damit es passt seinen Inhalt und entfernen Sie die horizontale Bildlaufleiste.

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

.b {
  min-width: 0;
}

<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>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWarum funktioniert „overflow-wrap: break-word' nicht wie erwartet, wenn es in einem Flexbox-Container verwendet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage