Mengapakah `overflow-wrap: break-word` tidak berfungsi seperti yang diharapkan apabila digunakan dalam bekas flexbox?-tutorial css-php.cn

Mengapakah `overflow-wrap: break-word` tidak berfungsi seperti yang diharapkan apabila digunakan dalam bekas flexbox?

Mary-Kate Olsen

Lepaskan： 2024-11-02 10:04:30

asal

953 orang telah melayarinya

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

Flexbox Mempengaruhi Gelagat Limpahan-Balut

Soalan:

Dalam kod berikut, mengapa sifat limpahan-balutan tidak berkelakuan seperti yang diharapkan apabila digabungkan dengan paparan: lentur?

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

Salin selepas log masuk

Jawapan:

Apabila anda menambah paparan: lentur pada elemen bungkus, ia menjadi bekas kotak flex . Secara lalai, elemen di dalam bekas flexbox dijajarkan dalam satu baris. Walau bagaimanapun, sifat lebar min bagi elemen anak flexbox ditetapkan kepada automatik secara lalai, menyebabkan mereka menduduki lebar minimum yang diperlukan untuk menyimpan kandungannya.

Dalam kod yang disediakan, ini bermakna elemen a dan b ialah diregangkan untuk menampung kandungan mereka. Memandangkan elemen b mempunyai kandungan teks yang sangat panjang, ia memaksa bar skrol mendatar untuk muncul.

Untuk menyelesaikan isu ini, anda boleh menetapkan lebar min bagi elemen b kepada 0. Ini akan membolehkan ia mengecut untuk dimuatkan kandungannya dan hapuskan bar skrol mendatar.

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

Salin selepas log masuk

Atas ialah kandungan terperinci Mengapakah `overflow-wrap: break-word` tidak berfungsi seperti yang diharapkan apabila digunakan dalam bekas flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!