Как написать текст вертикально на css?

Question

[mrbykovoleg]

Не получается хоть убейте меня. write-mode transform 90 deg и тд ну просто ничего просто не получается сделать такое. Он поворачивается но не растягивается на всю высоту блока. Использую grid и div размещен как grid-column: 1; grid-row: 1/4;

/*Этот кусок кода отвечающий за нужный блок*/
.priceCol > div:nth-of-type(1) {
position: relative;
grid-column: 1; grid-row: 1/3;
background: #993333;
text-align: center;
}
.priceCol > div:nth-of-type(1) > p {
transform: rotate(-90deg);
}

Comments

[Abr_ya]

По скриншоту трудно понять, почему ширина p на скриншоте - 87px?
Не ясно: что тут причина, что следствие?
Вам с кодом виднее - может туда копнуть?

Answer 1

[MaksPaverov]

-webkit-writing-mode: vertical-rl; 
writing-mode:tb-rl;

или

-webkit-transform: rotate(90deg); 
transform: rotate(90deg);

Comments

[mrbykovoleg]

Я использовал все это в первую очередь, что логично же, но на скрине видно, что текст не распределяется на весь блок красного цвета

[MaksPaverov]

mrbykovoleg, был бы кусок кода, можно было бы посмотреть

[mrbykovoleg]

Я дополнил вопрос css стилями. Но html не дал выложить.

[Сергей Горячев]

mrbykovoleg, так научись пользоваться для начала тостером.

<code>
.priceCol > div:nth-of-type(1) {
position: relative;
grid-column: 1; grid-row: 1/3;
background: #993333;
text-align: center;
}
.priceCol > div:nth-of-type(1) > p {
transform: rotate(-90deg);
} 
</code>

[Сергей Горячев]

mrbykovoleg, а потом песочницами, например jsfiddle

[mrbykovoleg]

Сергей Горячев, благодарю, но как правило вопросы задаю нечасто. Однако уже три задал)

[Сергей Горячев]

mrbykovoleg, это совсем не повод задавать их так, чтобы невозможно было ответить. Так ведь?

[mrbykovoleg]

Сергей Горячев, Вы правы, но все постигается опытом)