Teks di bawah susun atur flex ditinggalkan tetapi bekas dibuka? Bagaimana menyelesaikannya?

Penyelesaian untuk peninggalan limpahan teks di bawah susun atur flex yang menyebabkan pengembangan kontena

Apabila menggunakan susun atur Flex, anda sering menghadapi keadaan ini: lebar elemen kiri ditetapkan, dan elemen yang betul menyesuaikan diri dengan ruang yang tinggal. Walau bagaimanapun, apabila menambah gaya ellipsis ( text-overflow: ellipsis ) ke teks yang betul, kontena secara tidak sengaja dibuka, memusnahkan susun atur halaman. Artikel ini akan menganalisis sebab -sebab dan menyediakan penyelesaian.

Masalah: Bekas Flex mengandungi gambar (lebar tetap) dan teks (ruang yang tersendiri). Selepas menambah gaya Omit Text, lebar kontena melebihi jangkaan dan tidak sepenuhnya menduduki ruang yang ada (100VW), dan ellipsis tidak sah. Ini kerana walaupun peninggalan ditetapkan, penyemak imbas masih akan memperuntukkan ruang yang cukup untuk teks panjang untuk memaparkan kandungan lengkap, menyebabkan bekas dibentangkan.

Sebab akar adalah tingkah laku lalai susun atur Flex: Kanak -kanak membuka ruang berdasarkan kandungan. Lebar minimum tidak terhad kepada teks panjang, dan walaupun text-overflow: ellipsis digunakan, bekas Flex masih mengira lebar berdasarkan kandungan sebenar teks.

Penyelesaian: Tambah min-width: 0; gaya ke elemen yang mengandungi teks. Gaya ini memaksa lebar minimum elemen teks menjadi 0, walaupun teks terlalu panjang, ia tidak akan menjejaskan pengiraan lebar kontena. Bekas Flex akan memperuntukkan lebar mengikut ruang yang tinggal, mencapai susun atur penyesuaian yang diharapkan, sementara bahagian limpahan teks akan ditinggalkan dengan betul. Ini dapat menyelesaikan masalah pengembangan kontena dengan sempurna yang disebabkan oleh peninggalan limpahan teks di bawah susun atur flex, mencapai kesan yang diharapkan dari lebar penyesuaian dan menyembunyikan teks.

Atas ialah kandungan terperinci Teks di bawah susun atur flex ditinggalkan tetapi bekas dibuka? Bagaimana menyelesaikannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!