Bagaimana untuk Memutar Teks 90 Darjah Kiri dalam Sel Jadual dan Laraskan Saiz Sel Berdasarkan Panjang Teks?

Cara Memutar Teks 90 Darjah Ke Kiri dan Laraskan Saiz Sel Mengikut Teks dalam HTML

Memutar sel teks 90 darjah ke kiri menggunakan transformasi CSS boleh menghadapi cabaran, seperti salah jajaran dan pemformatan yang tidak kemas. Untuk menangani isu ini, kami boleh melaksanakan penyelesaian CSS dan HTML yang ketat yang melaraskan saiz sel secara dinamik berdasarkan panjang teks.

Dalam kod HTML, kami menggunakan <span> elemen untuk mengandungi teks yang ingin kita putar:

<code class="html">&lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot;&gt;
    &lt;tr&gt;
        &lt;td id='rotate'&gt;&lt;span&gt;10kg&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;B&lt;/td&gt;
        &lt;td&gt;C&lt;/td&gt;
        &lt;td&gt;D&lt;/td&gt;
        &lt;td&gt;E&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td id='rotate'&gt;&lt;span&gt;20kg&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;G&lt;/td&gt;
        &lt;td&gt;H&lt;/td&gt;
        &lt;td&gt;I&lt;/td&gt;
        &lt;td&gt;J&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td id='rotate'&gt;&lt;span&gt;30kg&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;L&lt;/td&gt;
        &lt;td&gt;M&lt;/td&gt;
        &lt;td&gt;N&lt;/td&gt;
        &lt;td&gt;O&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;</code>

Seterusnya, kami menggunakan gaya CSS untuk memutar teks dan melaraskan saiz sel dengan sewajarnya:

<code class="css">th {
  vertical-align: bottom;
  text-align: center;
}

th span {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}</code>

Begini cara ia berfungsi :

• Peraturan ke-th menetapkan penjajaran menegak sel ke bahagian bawah dan penjajaran teks ke tengah.
• Peraturan rentang ke-th menggunakan mod penulisan menegak pada teks, terbalik ia 180 darjah dan menghalang pembalut.

Dengan menggunakan keupayaan mod penulisan CSS, kami boleh melaraskan saiz sel secara dinamik berdasarkan panjang teks, memastikan teks diputar dengan betul tanpa menjejaskan susun atur meja. Kaedah ini amat berguna untuk senario di mana panjang teks berbeza dengan ketara dalam lajur.

Atas ialah kandungan terperinci Bagaimana untuk Memutar Teks 90 Darjah Kiri dalam Sel Jadual dan Laraskan Saiz Sel Berdasarkan Panjang Teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!