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

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

DDD

Lepaskan： 2024-10-27 08:26:03

asal

731 orang telah melayarinya

How to Rotate Text Vertically in HTML Tables Using CSS?

Teks Menegak dalam Jadual HTML

Banyak sel jadual HTML mengandungi tajuk yang menggunakan ruang yang besar. Untuk menjimatkan ruang, anda boleh mempertimbangkan untuk memutar teks secara menegak. Berikut ialah penyelesaian mudah alih untuk mencapai ini:

Kaedah Transformasi CSS

Kaedah ini menggunakan transformasi CSS untuk memutar teks. Ia menyokong pelbagai pelayar dan menyediakan penyelesaian merentas platform. Berikut ialah kod CSS:

<code class="css">.box_rotate {
  -moz-transform: rotate(7.5deg); /* Firefox 3.5+ */
  -o-transform: rotate(7.5deg); /* Opera 10.5 */
  -webkit-transform: rotate(7.5deg); /* Safari 3.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

Penggunaan HTML

Untuk menggunakan putaran, hanya bungkus teks dalam

elemen dan gunakan kelas CSS .box_rotate. Berikut ialah contoh:

<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

Apabila dilaksanakan,

pertama dan ketiga; elemen akan memaparkan teks secara mendatar, manakala

kedua; elemen (dengan kelas .box_rotate) akan memaparkan teks yang diputar 7.5 darjah lawan jam.

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

sumber：php.cn

Artikel sebelumnya：Bagaimana untuk Mencapai Gelagat Seret/Ubah Saiz jQuery yang Betul dengan Skala Transformasi CSS? Artikel seterusnya：Bagaimanakah saya boleh menggunakan pemilih CSS untuk menyasarkan elemen yang IDnya mengandungi teks tertentu dan berakhir dengan rentetan tertentu?

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