Space Base Space Base
+7 928 008-80-89
ru
  • en
  • es
  • Главная
  • Услуги
  • Портфолио
  • Библиотека
  • Контакты
  • Главная
  • Услуги
  • Портфолио
  • Библиотека
  • Контакты
  1. Библиотека
  2. HTML, CSS, jQuery
  3. Расположение текста вертикально (CSS, HTML)
logo

Расположение текста вертикально (CSS, HTML)

16.04.2015

Выводить на сайте текст вертикально можно в различных целях. Это может быть чисто дизайнерский ход и в таких случаях этот изыск реализуется простой картинкой. Думаю здесь все понятно, и рассматривать эту «технологию» не нужно.

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

В CSS есть свойства transform и transform-origin, которые выполняют такую функцию. В реале же для разных браузеров были добавлены соответствующие стили (-ms-transform, -moz-transform, -ms-transform-origin, -moz-transform-origin).

Применяя эти свойства, мы получим развернутый текст, но его расположение будет смещенным относительно исходного положения контейнера. Располагая одну строку вертикально не сложно настроить ее положение, дорабатывая смещением margin.

Чуть сложнее задача становится, если нужно расположить близко стоящие колонки в таблице. Например, таблица:

Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4 Заголовок 5
1 2 3 4 5
6 7 8 9 10

При развороте текста, размеры содержащего контейнера по ширине и высоте становятся равными, а из-за ячейки с развернутым текстом не становятся меньше. Чтобы было проще управлять шириной ячеек и в итоге получить таблицу с узкими ячейками, стоит текст заключить во вложенные теги div, к которым и будет применяться стили вертикального текста. Здесь же задаем высоту ячейки с заголовками таблицы и ширину блока. Чтобы текст выводился в одну строку, добавляем запрет на перенос строки (white-space: nowrap).

В зависимости от необходимого положения, смещение тоже придется подгонять вручную свойством margin.

В итоге, получаем следующий код и результат:

Заголовок 1
Заголовок 2
Заголовок 3
Заголовок 4
Заголовок 5
1 2 3 4 5
6 7 8 9 10

 

<style>
#vert{width:10%;} #vert td{text-align:center;padding:10px 0;} .vert-text {
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);

    -ms-transform-origin: left top 0;
    -moz-transform-origin: left top 0;
    -webkit-transform-origin: left top 0;
    transform-origin: left top 0;

    margin-left: 30px;
    padding: 0;
    float: left;
    height: 80px;
    width: 5px;
    white-space: nowrap;
}
<style>

 


<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td><div class="vert-text">Заголовок 1</div></td>
<td><div class="vert-text">Заголовок 2</div></td>
<td><div class="vert-text">Заголовок 3</div></td>
<td><div class="vert-text">Заголовок 4</div></td>
<td><div class="vert-text">Заголовок 5</div></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>

Стоит еще отметить, что свойству transform можно задавать произвольный угол наклона текста, а не только 90 градусов, как показано в примере выше.

Данное решение не идеальное, но для конкретной задачи можно использовать. Если у кого-то есть иное решение, более очевидное и простое, делитесь в комментариях.

Другие материалы:

Расположение текста вертикально (CSS, HTML)


Отключение авто-заполнения в текстовых полях формы


Отправка (submit) формы после выбора файла с оформлением input[file]


Написать комментарий

Комментарии

В комментариях запрещено публиковать рекламные материалы. Все сообщения оправляются на модерацию и будут опубликованы, если не нарушают правил сайта после проверки.


коммент.

Разработка сайтов

Корпоративный сайт
Интернет-магазин
Лендинг - одностраничный сайт
Сайт-визитка
Сайт-портфолио

Проектирование

Прототип, UX-дизайн

Дизайн

UI-дизайн
Логотип

+54 911 2801-4950

info@space-base.net
+7 928 008-80-89

Web-сайты для успешного бизнеса

Web-сайты для успешного бизнеса

Главная Услуги Портфолио События Библиотека Контакты
+7 928 008-80-89 Меню
Политика в отношении обработки персональных данных © Copyright 2014 - | Space-Base

Лучшее время начать свой проект - Сейчас!

Выбраны опции:

Отправить сообщение на:

Telegram WhatsApp

Отправляя сообщение, вы даете свое согласие на
обработку песональных данных