Есть ли (переносимый) способ повернуть текст в ячейке таблицы HTML на 90 °?
(У меня есть таблица с множеством столбцов и большим количеством текста для заголовков, поэтому я хотел бы написать ее вертикально, чтобы сэкономить место.)
html
css
text-rendering
text-styling
Флориан Дженн
источник
источник
Ответы:
Взято с http://css3please.com/
С 2017 года вышеупомянутый сайт упростил набор правил, чтобы отказаться от устаревшего фильтра Internet Explorer и больше полагаться на теперь стандартное
transform
свойство :источник
90deg
, конечно, используя ...)square
, иначе после поворота высота и ширина также поворачиваются вместе с элементом, который нарушает внешний вид, и текст элементов перекрывается с другимиАльтернативное решение?
Будет ли работать, если вместо поворота текста он будет написан «сверху вниз»?
Как это:
Я думаю, это было бы намного проще - вы можете выделить строку текста и вставить разрыв строки после каждого символа.
Это можно сделать с помощью JavaScript в браузере следующим образом:
... или вы можете сделать это на стороне сервера, чтобы это не зависело от возможностей JS клиента. (Полагаю, это то, что вы подразумеваете под «портативным»?)
Также пользователю не нужно поворачивать голову набок, чтобы прочитать его. :)
Обновить
Эта ветка посвящена этому с помощью jQuery.
источник
В исходном ответе и в моем предыдущем ответе в строке IE8 есть цитата, которая отбрасывает это, прямо рядом с точкой с запятой. Ой и БААААД! В приведенном ниже коде вращение установлено правильно и работает. Для применения фильтра в IE необходимо плавать.
источник
После более чем двух часов попыток я могу с уверенностью сказать, что все упомянутые до сих пор методы не работают в браузерах или для IE даже в версиях браузеров ...
Например (ответ с наибольшим количеством голосов):
вращается дважды в IE9, один раз для фильтра и один раз для -ms-filter, поэтому ...
Все остальные упомянутые методы также не работают, по крайней мере, если вам не нужно устанавливать фиксированную высоту / ширину ячейки заголовка таблицы (с цветом фона), где она должна автоматически подстраиваться под размер самого высокого элемента.
Итак, чтобы подробнее рассказать о генерации изображений на стороне сервера, предложенной Натаном Лонгом, которая на самом деле является единственным универсально работающим методом, вот мой код VB.NET для универсального обработчика (* .ashx):
Обратите внимание: если вы думаете, что эта часть
можно заменить на
поскольку он работает на сервере разработки, вы глубоко ошибаетесь, полагая, что тот же самый код не вызовет исключение Generic GDI +, если вы развернете его на сервере Windows 2003 IIS 6 ...
затем используйте это так:
источник
Мой первый вклад в сообщество, например, поворот простого текста и заголовка таблицы, только с использованием html и css.
HTML
CSS
Вот пример в jsfiddle
источник
Фильтры IE плюс преобразования CSS ( Safari и Firefox ).
Поддержка IE самая старая, Safari имеет [по крайней мере некоторую?] Поддержку в версии 3.1.2, а Firefox не будет поддерживать до версии 3.1.
В качестве альтернативы я бы порекомендовал сочетание Canvas / VML или SVG / VML. (Canvas имеет более широкую поддержку.)
источник
Вот тот, который работает с обычным текстом с некоторой обработкой на стороне сервера:
что дает что-то вроде:
http://jsfiddle.net/TzzHy/
источник
Я использовал библиотеку Font Awesome и смог добиться этого эффекта, добавив следующее к любому элементу html.
Ваш пробег может отличаться.
источник
Другое решение:
Я абсолютно согласен с тем, что это довольно хакерский метод, но это простое решение, если вы хотите избежать раздувания CSS.
источник
источник
Взгляните на это, я нашел это, когда искал решение для IE 7.
полностью классное решение для css only vibes
Спасибо aiboy за душу
вот ссылка
и вот ссылка на переполнение стека, где я наткнулся на эту ссылку мяу
источник