Bagaimanakah Flexbox Mempengaruhi Gelagat Overflow-Wrap: Break-Word?

Kesan Flexbox pada Gelagat Limpahan-Balut

Pengenalan Flexbox kepada elemen CSS boleh mengubah tingkah laku balutan limpahan: kata putus. Apabila digunakan pada elemen dengan limpahan-balutan: break-word, flexbox menyusunnya semula dalam satu baris secara lalai.

Walau bagaimanapun, lebar min lalai sifat anak flexbox ialah auto, yang menyebabkan elemen seperti a dan b dalam contoh kami untuk mengekalkan lebar minimum berdasarkan kandungannya. Untuk menghapuskan bar skrol mendatar, kami boleh melaraskan sifat lebar min:

<code class="css">.b {
  min-width: 0;
}</code>

Dengan menetapkan lebar min kepada 0, kami membolehkan kandungan mengalir secara semula jadi, membenarkan pemisah baris berfungsi seperti yang diharapkan tanpa mencetuskan mendatar menatal.

Berikut ialah contoh yang diubah suai untuk demonstrasi:

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

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

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

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!