Bagaimanakah Flexbox Mempengaruhi Gelagat `overflow-wrap: break-word`?

Kesan Flexbox pada Overflow-Wrap

Dalam bidang CSS, sifat limpahan-balutan dan paparan berinteraksi untuk mengawal tingkah laku teks kandungan membungkus dan melimpah. Mari kita terokai kelainan menarik yang diperhatikan dalam senario tertentu.

Pertimbangkan coretan kod berikut:

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

Dengan limpahan-balutan: break-word digunakan, teks dalam div kedua, . b, harus dipecahkan kepada berbilang baris, seperti yang ditunjukkan dalam coretan pertama.

Walau bagaimanapun, keadaan berubah yang tidak dijangka apabila kami menambah paparan: lentur pada bekas bungkus:

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

Dalam ini senario, bar skrol mendatar muncul, menjadikan teks tidak boleh dibaca melebihi titik tertentu. Bagaimanakah kita boleh membetulkan tingkah laku ini tanpa menggunakan limpahan: tersembunyi?

Penyelesaian terletak pada memahami cara flexbox mempengaruhi anak-anaknya. Secara lalai, apabila bekas mempunyai paparan: flex, elemen anaknya diletakkan secara automatik dalam baris atau lajur, bergantung pada sifat arah flex.

Dalam kes kami, apabila paparan: flex digunakan pada balut bekas, div a dan b dibentangkan secara mendatar, seperti yang dijangkakan. Walau bagaimanapun, sifat lebar min bagi kanak-kanak flexbox menjadi lalai kepada auto, bermakna setiap div akan menggunakan lebar minimum yang diperlukan untuk menampung kandungannya.

Untuk menyelesaikan isu ini, kami perlu menetapkan lebar min secara eksplisit daripada b div kepada 0:

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

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

Dengan berbuat demikian, kami memastikan bahawa b div boleh mengembang agar sesuai dengan lebar bekas yang tersedia, menghapuskan bar skrol mendatar dan membenarkan teks pecah kepada berbilang baris seperti yang dimaksudkan .

Atas ialah kandungan terperinci Bagaimanakah Flexbox Mempengaruhi Gelagat `overflow-wrap: break-word`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!