Rumah >hujung hadapan web >tutorial css >Bagaimanakah saya boleh memutar teks secara menegak dalam jadual HTML?

Bagaimanakah saya boleh memutar teks secara menegak dalam jadual HTML?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-11-02 00:23:02495semak imbas

How can I rotate text vertically in an HTML table?

Teks Menegak dalam Jadual HTML

Memusingkan teks secara menegak dalam sel jadual HTML ialah pertanyaan biasa untuk mengoptimumkan ruang dalam jadual padat. Untuk mencapai kesan ini, pendekatan popular memanfaatkan sifat transformasi untuk menentukan gaya CSS.

Satu kaedah melibatkan penggunaan sifat putaran CSS:

.box_rotate {
  -moz-transform: rotate(7.5deg);  /* FF3.5+ */
  -o-transform: rotate(7.5deg);  /* Opera 10.5 */
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}

Dengan menggunakan gaya ini pada jadual sel, teks di dalamnya akan diputar 7.5 darjah melawan arah jam:

<code class="html"><td>
  <div class="box_rotate">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</td></code>

Teknik ini membolehkan anda mengubah teks secara menegak, menjimatkan ruang secara berkesan dalam jadual dengan tajuk atau teks yang meluas.

Atas ialah kandungan terperinci Bagaimanakah saya boleh memutar teks secara menegak dalam jadual HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn