Bagaimanakah saya boleh memutar teks secara menegak dalam jadual HTML?

Mary-Kate Olsen
Lepaskan: 2024-11-02 00:23:02
asal
491 orang telah melayarinya

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 */
}
Salin selepas log masuk

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan