Bagaimanakah Saya Boleh Memaparkan Teks Menegak dalam Pengepala Jadual dengan Ketinggian Dinamik dan Tiada Limpahan?

Memaparkan Teks Menegak dalam Pengepala Jadual dengan Ketinggian Dinamik dan Tiada Limpahan

Untuk memaparkan teks diputar sebagai pengepala jadual menggunakan sifat transformasi CSS, terdapat cabaran untuk menghalang teks diputar daripada melimpah apabila baris pengepala perlu melaraskan ketinggiannya.

Masalah:

Apabila menggunakan sifat transformasi CSS:

transform: rotate(-90deg);

untuk memutar teks pengepala, baris pengepala kekal pada ketinggian asalnya, menyebabkan limpahan teks diputar:

[Imej contoh yang salah]

Penyelesaian:

Untuk membenarkan baris pengepala berkembang mengikut keperluan, gunakan sifat CSS:

writing-mode: vertical-lr;

Penjelasan:

kawalan mod penulisan arah penulisan teks. Nilai menegak-lr menunjukkan bahawa teks harus ditulis secara menegak dari kiri ke kanan. Ini memastikan teks yang diputar sesuai dalam ruang menegak sel pengepala, membolehkan baris pengepala melaraskan ketinggiannya dengan sewajarnya.

[Imej contoh yang betul]

Kod Contoh:

th {
  writing-mode: vertical-lr;
  transform: rotate(-90deg);
}

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memaparkan Teks Menegak dalam Pengepala Jadual dengan Ketinggian Dinamik dan Tiada Limpahan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!