От автора: Практически каждый HTML элемент, который мы создаем, представляется нам в горизонтальной форме. Мы придаем гораздо большее значение ширине, чем высоте, особенно если дело касается текста внутри. Иногда нам, тем не менее, нужно расположить текст вертикально. В старые времена недоработанных версий Internet Explorer, это было практически невыполнимо. Однако, в нынешние времена – это легкая работа. Вот как это можно сделать.
Код CSS
Вертикальное расположение текста легко достигается с помощью свойства CSS transform:
| 1 2 3 4 5 | .vertical-text { transform: rotate(90deg); transform-origin: left top 0; } /* Не забудьте добавить префиксы вендоров –moz –ms, -o, -webkit */ |
Практический курс по верстке адаптивного лендинга с нуля!
Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней
Узнать подробнееВ зависимости от того, в каком направлении вы хотите расположить текст, вращение может отличаться, но вертикальное направление тексту задает значение свойства transform. Вот полезная подсказка:
| 1 2 3 | .vertical-text { float: left; } |
Свойство float эмулирует автоматическое задание ширины.
Свойство transform дает массу возможностей помимо вертикального расположения текста, и код, приведенный выше, справляется с этой работой. Разве это не большой прогресс?
Автор: David Walsh
Источник: http://davidwalsh.name/
Редакция: Команда webformyself.
Практика HTML5 и CSS3 с нуля до результата!
Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3
Получить
А как сделать чтобы снизу вверх писалось?
Тогда не 90 градусов, а 270 надо поставить.
Я удивлен, что нету специального CSS свойства для задания направления текста ((