Текст по вертикали

Внедряем CSS в HTML. JavaScript.
Аватара пользователя
Slash
Администратор
Сообщения: 2209
Зарегистрирован: Сб авг 11, 2012 7:39 am
Поблагодарили: 81 раз

Текст по вертикали

#1

Сообщение Slash » Пн фев 18, 2013 6:30 pm

Возможно вам будет необходимо написать текст в нестандартном виде, сверху вниз, то есть по вертикали. Сразу скажу тут ни чего сложного нет, делается это так: создаем файл style.css или дописываем в уже существующий файл стиля следующие:

Код: Выделить всё

div.vt {
      width: 1em; 
      line-height: 1em;
}
В шаблон вашего сайта добавляем:

Код: Выделить всё

<div class="vt">...  Т у т  т е к с т  к о т о р ы й  б у д е т  р а с п о л о ж е н  п о  в е р т и к а л и  ...</div> 
Обратите внимание на то, что слова написаны с одним пробелом, а между слов идет два пробела. Если не ставить пробелы между буквами, эти буквы будут идти в одну строчку.
- Это вариант выводит текст по вертикали, но буквы при этом остаются в стоячем положении, а если вам надо положить, то используйте следующий код стиля:

Код: Выделить всё

#div.vt {
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    writing-mode: tb-rl;
    width: 300px;
    height: 200px;
} 

Реклама

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 0 гостей