Bagaimana untuk Memutar Teks Ke Kiri 90 Darjah dalam HTML dan Laraskan Saiz Sel Sehubungan itu?

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

Untuk mencapai kesan putaran yang anda inginkan sambil juga melaraskan saiz sel dengan sewajarnya, pertimbangkan untuk menggunakan gabungan CSS dan HTML.

Penyelesaian CSS:

<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>

Penyelesaian HTML:< /h3>

<code class="html"><table>
  <tr>
    <th><span>Rotated text by 90 deg.</span></th>
  </tr>
</table></code>

Dalam penyelesaian ini:

• th { vertical-align: bottom; text-align: tengah; }: Menjajarkan teks yang diputar secara menegak dan mendatar dalam sel.
• span ke-1 { ...writing-mode: vertical-rl; }: Menetapkan mod penulisan teks kepada menegak, membenarkan ia diputar secara menegak.
• span ke-1 { transform: rotate(180deg); }: Putar teks sebanyak 180 darjah untuk menghadap ke kiri.
• span ke-th { white-space: nowrap; }: Menghalang teks daripada membalut, jadi ia muat semua pada satu baris dan melaraskan saiz sel dengan sewajarnya.

Nota:

Penyelesaian ini memerlukan anda membungkus teks yang diputar dalam unsur. The elemen hanya diperlukan untuk Chrome kerana ia tidak menyokong perubahan arah teks untuk elemen.

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