Выводить на сайте текст вертикально можно в различных целях. Это может быть чисто дизайнерский ход и в таких случаях этот изыск реализуется простой картинкой. Думаю здесь все понятно, и рассматривать эту «технологию» не нужно.
Но вот что делать, если оформление вертикального текста не изыск, а реальная необходимость? Чаще всего такая проблема возникает при необходимости разместить на сайте большую таблицу с кучей полей, содержащих несколько символов, но заголовками из нескольких слов.
В CSS есть свойства transform и transform-origin, которые выполняют такую функцию. В реале же для разных браузеров были добавлены соответствующие стили (-ms-transform, -moz-transform, -ms-transform-origin, -moz-transform-origin).
Применяя эти свойства, мы получим развернутый текст, но его расположение будет смещенным относительно исходного положения контейнера. Располагая одну строку вертикально не сложно настроить ее положение, дорабатывая смещением margin.
Чуть сложнее задача становится, если нужно расположить близко стоящие колонки в таблице. Например, таблица:
| Заголовок 1 | Заголовок 2 | Заголовок 3 | Заголовок 4 | Заголовок 5 |
| 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | 10 |
При развороте текста, размеры содержащего контейнера по ширине и высоте становятся равными, а из-за ячейки с развернутым текстом не становятся меньше. Чтобы было проще управлять шириной ячеек и в итоге получить таблицу с узкими ячейками, стоит текст заключить во вложенные теги div, к которым и будет применяться стили вертикального текста. Здесь же задаем высоту ячейки с заголовками таблицы и ширину блока. Чтобы текст выводился в одну строку, добавляем запрет на перенос строки (white-space: nowrap).
В зависимости от необходимого положения, смещение тоже придется подгонять вручную свойством margin.
В итоге, получаем следующий код и результат:
Когда мы отображаем таблицы, для экономии места в шапке и сохранения минимальной ширины колонок можно использовать вертикальное отображение текста. Наверное, каждый из нас встречал бумажные таблицы, в которых текст в шапке был написан как бы снизу вверх (кстати, при вертикальном расположении правильно именно так, а не сверху вниз). В вебе тоже можно делать такие трюки, причем, для этого есть стандартные свойства CSS.
Казалось бы, на первый взгляд проблема может показаться не очень актуальной, но если вспомнить о носителях азиатской культуры, у которых иероглифы традиционно могут писаться вертикально, сомнения об актуальности развеятся. Для примера, японское правительство предлагает гранты на решение проблем с вертикальным отображением текста.
Для создания вертикального текста сейчас используется свойство CSS для поворота:
Здесь в скобках указан градус, на который осуществляется поворот. Также можно указать точку, относительно которой необходимо поворачивать:
Здесь в качестве процентов указывается относительная позиция той точки, вокруг которой будет произведено вращение. 50% используется по умолчанию, это середина. Первое число — координата по X, второе — по Y. Если требуется вращать относительно левой стороны блока, надо указать 0% 50%, правой — 100% 50%, аналогично с верхом и низом. Вместо процентов можно использовать ключевые слова left, right, top, bottom. Однако, обычных значений по умолчанию почти всегда бывает достаточно.
Ниже приведен пример, как сделать вертикальный текст в шапке таблицы:
Обратите внимание на браузерные приставки к transform, они пока нужны для совместимости. Также, если внимательно посмотреть на CSS примера, может возникнуть вопрос: зачем еще какой-то код? Все дело в том, что при повороте на прямой угол ширина как бы становится высотой, а высота — шириной, и блоки шапки таблицы становятся излишне широкими, особенно при длинном тексте. Чтобы избежать этого, введены хаки с дополнительными блоками p, псевдоклассом before и режимом table-layout:fixed у таблицы.
I want to display rotated text as table headers, using the CSS transform property. The header row should adjust its height as needed, but instead the rotated text just overflows:
My question is, how to get the table header to grow as needed? Essentially it should look like this:
5 Answers 5
If you use a pseudo element and vertical-padding, you may basicly draw a square box or
If you want to keep
If you want table to still be able to grow from it’s content but not from width of
HTML from demo and base :
There are new (experimental) CSS3 feature which does what exactly that: writing-mode.
You have to apply it on a div ins >
Thanks to @gman — it works in Firefox but not in Chrome. One can wrap the content of th in div to have the vertical text in Chrome js-fiddle demo but it feels like a kludge.