Bagaimanakah Flexbox Mempengaruhi Gelagat `overflow-wrap` dan Bagaimana Kami Boleh Membetulkannya?

Kesan Flexbox pada Gelagat Limpahan-Balut

Dalam CSS, sifat limpahan-balut membolehkan teks dipecahkan kepada berbilang baris apabila ia menemui a watak putus baris. Ini membolehkan reka letak teks yang lebih fleksibel dan menghalang garisan panjang daripada melimpah ke dalam bekas. Walau bagaimanapun, apabila digabungkan dengan paparan: sifat flex, limpahan-balutan boleh menunjukkan kelakuan yang tidak dijangka.

Isu:

Pertimbangkan coretan berikut, di mana limpahan-balutan: pecah -word digunakan pada bekas dengan dua elemen anak:

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

Apabila limpahan-balutan didayakan, teks dalam elemen anak kedua harus dipecahkan kepada berbilang baris seperti yang diharapkan. Walau bagaimanapun, apabila paparan: flex ditambahkan pada bekas, bar skrol mendatar muncul walaupun terdapat tetapan limpahan-balutan.

Penyelesaian:

Untuk menghapuskan bar skrol mendatar, sifat lalai lebar min bagi elemen anak flexbox mesti ditindih. Dengan menetapkan lebar min kepada 0, lebar elemen kanak-kanak akan mengecut untuk menampung kandungannya, menghalangnya daripada melimpahi bekas.

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

.b {
  min-width: 0;
}

Dengan pelarasan ini, teks panjang dalam elemen anak kedua akan membalut kepada berbilang baris tanpa menyebabkan bar skrol mendatar. Ini menunjukkan bahawa walaupun paparan: flex boleh menjejaskan gelagat sifat CSS yang lain, ia masih boleh digunakan dalam kombinasi dengan limpahan-balutan untuk mencapai reka letak teks yang diingini.

Atas ialah kandungan terperinci Bagaimanakah Flexbox Mempengaruhi Gelagat `overflow-wrap` dan Bagaimana Kami Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!