Bagaimanakah Saya Boleh Menghidupkan Lebar Elemen dengan `lebar: auto`?

Saiz Semula Elemen Animasi dengan Lebar Auto

Soalan:

Cara menghidupkan lebar elemen dengan lebar: auto sebagai kandungan berubah?

Jawapan:

Menghidupkan lebar langsung elemen dengan lebar: auto tidak disokong dalam CSS pada masa ini. Walau bagaimanapun, anda boleh menggunakan kaedah alternatif:

1. Helah Max-Width/Max-Height:

• Tetapkan lebar maks/tinggi maks yang cukup besar untuk menampung kandungan berpotensi terluas.
• Gunakan paparan: sebaris -sekat untuk elemen mengaktifkan saiz pada kandungan perubahan.

Coretan Kod

.myspan {
  display: inline-block;
  font-size: 30px;
  background-color: #ddd;
  vertical-align: bottom;
  max-width: 500px;  // Adjust as necessary
}

.myspan::after {
  content: " a0\f12a ";
  font-family: ionicons;
  font-size: 80%;
  display: inline-block;
  max-width: 0;
  transition: max-width .6s;
  vertical-align: bottom;
  overflow: hidden;
}

.myspan:hover::after {
  max-width: 80px;
  transition: max-width 1s;
}

2. Manipulasi JavaScript:

• Gunakan JavaScript untuk menetapkan sifat lebar secara dinamik berdasarkan panjang kandungan.

Nota: Kaedah ini memerlukan tambahan kod dan mungkin tidak secekap pendekatan pertama.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghidupkan Lebar Elemen dengan `lebar: auto`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!