Apakah ada cara (portabel) untuk memutar teks dalam sel tabel HTML sebesar 90 °?
(Saya memiliki tabel dengan banyak kolom dan banyak teks untuk tajuk, jadi saya ingin menulisnya secara vertikal untuk menghemat ruang.)
html
css
text-rendering
text-styling
Florian Jenn
sumber
sumber
Jawaban:
Diambil dari http://css3please.com/
Pada 2017, situs yang disebutkan di atas telah menyederhanakan kumpulan aturan untuk menghapus filter Internet Explorer lama dan lebih mengandalkan standar sekarang.
transform
properti :sumber
90deg
, tentu saja ...)square
, jika tidak setelah rotasi, tinggi dan lebar juga diputar bersama dengan elemen yang merusak tampilan dan teks elemen tumpang tindih dengan lainnyaSolusi Alternatif?
Alih-alih memutar teks, apakah akan berhasil jika teksnya ditulis "dari atas ke bawah?"
Seperti ini:
Saya pikir itu akan jauh lebih mudah - Anda dapat memilih string teks secara terpisah dan memasukkan jeda baris setelah setiap karakter.
Ini dapat dilakukan melalui JavaScript di browser seperti ini:
... atau Anda dapat melakukannya di sisi server, sehingga tidak akan bergantung pada kemampuan JS klien. (Saya berasumsi itulah yang Anda maksud dengan "portabel?")
Juga pengguna tidak harus memalingkan kepalanya ke samping untuk membacanya. :)
Memperbarui
Utas ini tentang melakukan ini dengan jQuery.
sumber
Ada kutipan dalam jawaban asli dan jawaban saya sebelumnya di baris IE8 yang membuang ini, tepat di dekat titik koma. Astaga dan BAAAAD! Kode di bawah ini memiliki rotasi yang diatur dengan benar dan berfungsi. Anda harus mengapung di IE agar filter dapat diterapkan.
sumber
Setelah mencoba selama lebih dari dua jam, saya dapat dengan aman mengatakan bahwa semua metode yang disebutkan sejauh ini tidak berfungsi di seluruh browser, atau untuk IE bahkan di seluruh versi browser ...
Misalnya (jawaban top upvoted):
berputar dua kali di IE9, sekali untuk filter, dan sekali untuk -ms-filter, jadi ...
Semua metode lain yang disebutkan juga tidak berfungsi, setidaknya jika Anda tidak harus menyetel tinggi / lebar tetap dari sel header tabel (dengan warna latar belakang), yang akan secara otomatis menyesuaikan dengan ukuran elemen tertinggi.
Jadi untuk menguraikan tentang pembuatan gambar sisi server yang diusulkan oleh Nathan Long, yang benar-benar satu-satunya metode yang berfungsi secara universal, berikut kode VB.NET saya untuk penangan generik (* .ashx):
Perhatikan bahwa jika Anda berpikir bahwa bagian ini
bisa diganti dengan
karena ia bekerja pada server pengembangan, maka Anda salah mengira bahwa kode yang sama tidak akan memunculkan pengecualian GDI + Generik jika Anda menerapkannya ke server Windows 2003 IIS 6 ...
lalu gunakan seperti ini:
sumber
Kontribusi pertama saya ke komunitas, misalnya memutar teks sederhana dan header tabel, hanya menggunakan html dan css.
HTML
CSS
Berikut contoh di jsfiddle
sumber
Filter IE ditambah transformasi CSS ( Safari dan Firefox ).
Dukungan IE adalah yang tertua, Safari memiliki [setidaknya beberapa?] Dukungan di 3.1.2, dan Firefox tidak akan memiliki dukungan hingga 3.1.
Sebagai alternatif, saya akan merekomendasikan campuran Canvas / VML atau SVG / VML. (Kanvas memiliki dukungan yang lebih luas.)
sumber
Ini adalah salah satu yang berfungsi untuk teks biasa dengan beberapa pemrosesan sisi server:
yang memberikan sesuatu seperti:
http://jsfiddle.net/TzzHy/
sumber
Saya menggunakan pustaka Font Awesome dan dapat mencapai pengaruh ini dengan menempelkan hal berikut ke elemen html apa pun.
Jarak tempuh Anda mungkin berbeda.
sumber
Solusi lain:
Saya benar-benar mengakui bahwa ini cukup hackish, tetapi ini adalah solusi sederhana jika Anda ingin menghindari membengkaknya css Anda.
sumber
sumber
Silahkan lihat ini, saya menemukan ini sambil mencari solusi untuk IE 7.
benar-benar solusi yang keren untuk getaran css saja
Terima kasih aiboy untuk soultionnya
inilah tautannya
dan di sini adalah link stack-overflow tempat saya menemukan link ini meong
sumber