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

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>

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>

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!

css css3 html for using class this display transform column table

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