Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimanakah Flexbox Mempengaruhi Gelagat Overflow-Wrap: Break-Word?

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

Linda Hamilton
Linda Hamiltonasal
2024-10-31 09:17:29453semak imbas

How Does Flexbox Affect the Behavior of 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn