Как сделать вертикальный текст в CSS

или отображение текста по вертикали с помощью таблиц стилей

CSS вертикальный текст и пример реализации эффекта:

<title>Пример вертикального текста</title>

          <style type="text/css">

          div.v-t {width:1em; line-height:1em; font-size:19px; background-color:#ffffc9}

          </style>
 </head>

          <body>

          <div class="v-t">

          П р и м е р

          <p> </p>

          т е к с т а

          </div>

          </body>

Пошаговая инструкция:

Напечатали понравившийся нам текст и поместили его в блок.
Назначили блоку класс, который будет описан в стилях.
Разделили все буквы текста обычными пробелами с клавиатуры.
Между словами вставили пустой параграф, чтобы увеличить расстояние.
Определяем ширину блока в одну букву m, чтобы буквы выводились с новой строки.
Определяем необходимую высоту строки с помощью атрибута line-height.
Устанавливаем размер шрифта, в данном случае он равен 19 пикселям.
Я установил фон для блока, чтобы были видны его контуры.

Результат:

П р и м е р

т е к с т а

Можно поэкспериментировать со способами форматирования, например, разделить слова не пустым параграфом, а с помощью пустого блока, которому в тех же каскадных стилях задать нужную высоту в пикселях. Контейнер, содержащий текст, с помощью позиционирования можно легко переместить в любую точку страницы.

Подобного результата можно добиться путем создания изображения с текстом и последующего его позиционирования.

В следующем уроке мы рассмотрим текстовые и графические ссылки.

Автор проекта - Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

CSS высота текста Вертикальный CSS текст CSS гиперссылки