Bagaimana untuk Memutar Teks dalam Sel Jadual HTML Menggunakan Transformasi CSS?-tutorial css-php.cn

Bagaimana untuk Memutar Teks dalam Sel Jadual HTML Menggunakan Transformasi CSS?

Susan Sarandon

Lepaskan： 2024-10-28 08:01:29

asal

907 orang telah melayarinya

How to Rotate Text in HTML Table Cells Using CSS Transforms?

Memutar Teks dalam Sel Jadual HTML

Memandangkan jadual HTML digunakan secara meluas untuk menyusun dan memaparkan data jadual, keupayaan untuk memutar teks dalam sel boleh memberi manfaat dalam situasi terhad ruang, terutamanya untuk tajuk yang panjang.

Menggunakan Transformasi CSS

Penyelesaian yang teguh dan mudah alih untuk memutar teks dalam jadual HTML adalah melalui CSS berubah. Dengan menggunakan sifat transformasi CSS3, anda boleh mencapai putaran 90 darjah tanpa menjejaskan reka letak atau fungsi sel. Kod CSS berikut menunjukkan cara memutar teks sebanyak 7.5 darjah:

<code class="css">.box_rotate {
    -moz-transform: rotate(7.5deg);
    -o-transform: rotate(7.5deg);
    -webkit-transform: rotate(7.5deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
}</code>

Salin selepas log masuk

Contoh Pelaksanaan

Untuk menggambarkan pelaksanaan, pertimbangkan kod HTML berikut:

<code class="html"><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div class="box_rotate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div></code>

Salin selepas log masuk

Dalam contoh ini, kelas box_rotate digunakan pada

kedua, memutar teksnya sebanyak 7.5 darjah. Akibatnya, teks dalam sel khusus itu dipaparkan secara menegak, menjajarkan secara menegak dalam lajur jadual.

Atas ialah kandungan terperinci Bagaimana untuk Memutar Teks dalam Sel Jadual HTML Menggunakan Transformasi CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!