Bagaimanakah CSS `width: auto` dan `max-width` Mempengaruhi Limpahan dan Balutan Kandungan Petua Alat?

Gelagat Limpahan Kandungan Petua Alat

Apabila mencipta petua alat dengan CSS, anda mungkin menjangkakan lebar akan melaraskan secara automatik untuk menampung panjang kandungan, dengan sempadan yang ditetapkan oleh sifat lebar min dan lebar maksimum. Walau bagaimanapun, gelagat berbeza apabila kandungan dibalut pada berbilang baris.

Isu dan Gelagat

Isu timbul daripada menetapkan kedua-dua lebar: auto dan lebar maksimum: 250px. Walaupun lebar: auto membenarkan petua alat mengecil agar sesuai dengan kandungan, lebar maks mengehadkan pengembangannya kepada 250px. Tingkah laku ini jelas apabila perkataan yang panjang di hujung baris menyebabkan teks dibalut, meninggalkan padding yang ketara di sebelah kanan petua alat.

Penjelasan

Pelayar mengira lebar petua alat. dengan cuba mengalirkan teks dalam lebar maksimum yang dibenarkan (250px). Sebarang teks berlebihan dibalut ke baris berikutnya. Walau bagaimanapun, sebaik sahaja teks dibalut, lebar kotak ditetapkan pada 250px kerana itu adalah maksimum yang ditentukan dalam CSS. Ia tidak mengecut untuk menampung lebar teks yang dikurangkan selepas dibalut.

Resolusi

Malangnya, tiada penyelesaian mudah untuk mengubah suai tingkah laku ini. Pembalut teks secara semula jadi tidak membenarkan kotak mengecut selepas pemisah baris. Oleh itu, kesan pengecutan atau pertumbuhan yang dijangkakan tidak boleh dicapai menggunakan sifat CSS ini.

Atas ialah kandungan terperinci Bagaimanakah CSS `width: auto` dan `max-width` Mempengaruhi Limpahan dan Balutan Kandungan Petua Alat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!