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

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

Урок 7. Вертикальный текст в 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>

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

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

Результат:

П р и м е р

т е к с т а

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

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

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

Дата публикации: Октябрь 2009 | Обновление: Август 2014

Урок 6. CSS высота строки   Текст по вертикали   Урок 8. CSS гиперссылки

    Сохранить в сервисы и закладки