5

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

.vertical_text{
    transform: rotate(-90deg);
    transform-origin: left top 0;
    position: absolute;
    right: -320px;
    bottom: 0;
}

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

1

1 ответ 1

4

p{
   writing-mode: tb-rl;
   transform:rotate(180deg);
   font-size:40px;
}
<p> lorem ipsum</p>

support : http://caniuse.com/#search=writing-mode

1

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.