Bagaimanakah saya boleh memutar teks secara menegak dalam jadual HTML menggunakan CSS?

Memusing Teks Secara Menegak dalam Jadual HTML

Memusingkan teks dalam sel jadual HTML sebanyak 90° secara berserenjang boleh dicapai menggunakan transformasi CSS. Kaedah ini boleh digunakan pada kedua-dua tajuk teks dan sel jadual biasa, menampung teks yang mencukupi sambil mengoptimumkan penggunaan ruang.

Teknik Transformasi CSS:

Sifat transformasi CSS membolehkan manipulasi ciri visual elemen, termasuk putaran. Berikut ialah coretan CSS untuk teks berputar:

<code class="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 */
}</code>

Pelaksanaan HTML:

Untuk menjajarkan teks secara menegak dalam sel jadual, tetapkan kelas CSS kepada elemen HTML yang sesuai :

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

Sokongan Penyemak Imbas:

Transformasi CSS dan teknik penapis memastikan keserasian merentas pelayar:

• Firefox 3.5
• Opera 10.5
• Safari 3.1
• Chrome
• Internet Explorer 6-8

Sudut Putaran:

Sudut putaran 7.5 darjah adalah optimum untuk kebolehbacaan. Walau bagaimanapun, anda boleh melaraskannya untuk memenuhi keperluan khusus anda.

Pemerhatian Tambahan:

• Awalan CSS disertakan untuk sokongan penyemak imbas yang lebih luas.
• Pastikan elemen yang terjejas mempunyai ketinggian yang mencukupi untuk menampung teks yang diputar.
• Penjajaran teks dalam sel yang diputar mungkin berbeza sedikit bergantung pada penyemak imbas dan fon yang digunakan.

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