Вертикальный текст на CSS

От автора: Практически каждый HTML элемент, который мы создаем, представляется нам в горизонтальной форме. Мы придаем гораздо большее значение ширине, чем высоте, особенно если дело касается текста внутри. Иногда нам, тем не менее, нужно расположить текст вертикально. В старые времена недоработанных версий Internet Explorer, это было практически невыполнимо. Однако, в нынешние времена – это легкая работа. Вот как это можно сделать.

Код CSS

Вертикальное расположение текста легко достигается с помощью свойства CSS transform:

.vertical-text {
 transform: rotate(90deg);
 transform-origin: left top 0;
}
/* Не забудьте добавить префиксы вендоров –moz –ms, -o, -webkit */

В зависимости от того, в каком направлении вы хотите расположить текст, вращение может отличаться, но вертикальное направление тексту задает значение свойства transform. Вот полезная подсказка:

.vertical-text {
 float: left;
}

Свойство float эмулирует автоматическое задание ширины.

Свойство transform дает массу возможностей помимо вертикального расположения текста, и код, приведенный выше, справляется с этой работой. Разве это не большой прогресс?

Автор: David Walsh

Источник: http://davidwalsh.name/

Редакция: Команда webformyself.

Комментарии Вконтакте:

Комментарии (3)

1. Айжан

   2016-05-18 в 07:45

   А как сделать чтобы снизу вверх писалось?

   Ответить
   • Дмитрий

     2016-08-14 в 10:32

     Тогда не 90 градусов, а 270 надо поставить.

     Ответить
2. Цифровой

   2017-10-04 в 09:38

   Я удивлен, что нету специального CSS свойства для задания направления текста ((

   Ответить