Czy istnieje (przenośny) sposób obracania tekstu w komórce tabeli HTML o 90 °?
(Mam tabelę z wieloma kolumnami i dużą ilością tekstu na nagłówki, więc chciałbym napisać ją pionowo, aby zaoszczędzić miejsce).
html
css
text-rendering
text-styling
Florian Jenn
źródło
źródło
Odpowiedzi:
Zrobiono z http://css3please.com/
Od 2017 r. Wspomniana witryna uprościła zestaw reguł, aby porzucić starszy filtr Internet Explorera i polegać bardziej na standardowej
transform
właściwości :źródło
90deg
, oczywiście ...)square
, w przeciwnym razie po obróceniu wysokość i szerokość również są obracane wraz z elementem, który psuje wygląd, a tekst elementów nakłada się na inneAlternatywne rozwiązanie?
Czy zamiast obracania tekstu działałoby napisanie „od góry do dołu”?
Lubię to:
Myślę, że byłoby to o wiele łatwiejsze - możesz oddzielić ciąg tekstu i wstawić podział wiersza po każdym znaku.
Można to zrobić za pomocą JavaScript w przeglądarce w następujący sposób:
... lub możesz to zrobić po stronie serwera, więc nie zależałoby to od możliwości JS klienta. (Zakładam, że to masz na myśli mówiąc „przenośny”?)
Ponadto użytkownik nie musi odwracać głowy na boki, aby go przeczytać. :)
Aktualizacja
Ten wątek dotyczy robienia tego za pomocą jQuery.
źródło
W pierwotnej odpowiedzi i mojej poprzedniej odpowiedzi w wierszu IE8 znajduje się cytat, który to odrzuca, tuż obok średnika. Yikes i BAAAAD! Poniższy kod ma poprawnie ustawiony obrót i działa. Aby filtr został zastosowany, musisz pływać w IE.
źródło
Po ponad dwóch godzinach prób mogę śmiało powiedzieć, że cała wspomniana do tej pory metoda nie działa w różnych przeglądarkach lub w IE nawet w wersjach przeglądarek ...
Na przykład (odpowiedź do góry przegłosowana):
obraca się dwa razy w IE9, raz dla filtra i raz dla -ms-filter, więc ...
Wszystkie inne wymienione metody również nie działają, przynajmniej nie jeśli nie musisz ustawiać stałej wysokości / szerokości komórki nagłówka tabeli (z kolorem tła), gdzie powinna ona automatycznie dostosowywać się do rozmiaru najwyższego elementu.
Aby rozwinąć generację obrazu po stronie serwera zaproponowaną przez Nathana Longa, która jest tak naprawdę jedyną uniwersalnie działającą metodą, oto mój kod VB.NET dla ogólnego programu obsługi (* .ashx):
Zauważ, że jeśli myślisz, że ta część
można zastąpić
ponieważ działa na serwerze programistycznym, bardzo się mylisz, zakładając, że ten sam kod nie zgłosi wyjątku ogólnego GDI +, jeśli wdrożysz go na serwerze Windows 2003 IIS 6 ...
następnie użyj tego w ten sposób:
źródło
Mój pierwszy wkład w społeczność, na przykład obracanie prostego tekstu i nagłówka tabeli, tylko przy użyciu html i css.
HTML
CSS
Tutaj przykład w jsfiddle
źródło
Filtry IE oraz transformacje CSS ( Safari i Firefox ).
IE jest obsługiwana najstarsza, Safari ma [przynajmniej część?] Obsługę w 3.1.2, a Firefox nie będzie obsługiwał aż do 3.1.
Alternatywnie, poleciłbym mieszankę Canvas / VML lub SVG / VML. (Płótno ma szersze wsparcie.)
źródło
Oto taki, który działa w przypadku zwykłego tekstu z pewnym przetwarzaniem po stronie serwera:
co daje coś takiego:
http://jsfiddle.net/TzzHy/
źródło
Korzystałem z biblioteki Font Awesome i udało mi się osiągnąć ten efekt, dołączając poniższe elementy do dowolnego elementu HTML.
Twój przebieg może się różnić.
źródło
Inne rozwiązanie:
Absolutnie przyznaję, że jest to dość hakerskie, ale jest to proste rozwiązanie, jeśli chcesz uniknąć nadużywania css.
źródło
źródło
Spójrz na to, znalazłem to, szukając rozwiązania dla IE 7.
całkowicie fajne rozwiązanie dla wibracji tylko dla CSS
Dzięki aiboy za soultion
oto link
a tutaj jest łącze przepełnienia stosu, w którym natknąłem się na ten link miau
źródło