Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Memutar Teks dalam Jadual HTML Secara Menegak Menggunakan CSS?

Bagaimana untuk Memutar Teks dalam Jadual HTML Secara Menegak Menggunakan CSS?

Patricia Arquette
Lepaskan: 2024-10-27 00:44:02
asal
1012 orang telah melayarinya

How to Rotate Text in HTML Tables Vertically Using CSS?

Memusing Teks dalam Jadual HTML Secara Menegak

Memusingkan teks dalam jadual HTML untuk meningkatkan kebolehbacaan dengan menjimatkan ruang boleh menjadi ciri yang diingini untuk jadual dengan tajuk lajur yang luas. Walaupun tiada kaedah HTML asli untuk mencapai putaran, terdapat penyelesaian berasaskan CSS serba boleh:

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

Dengan menggunakan kelas ".box_rotate" pada sel jadual, teksnya akan diputar 7.5 darjah. Anda boleh melaraskan sudut putaran seperti yang dikehendaki.

Atas ialah kandungan terperinci Bagaimana untuk Memutar Teks dalam Jadual HTML Secara Menegak Menggunakan CSS?. 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