TransWikia.com

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

Stack Overflow на русском Asked by Shadow Blade on December 26, 2021

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

csshtmlвёрстка

2 Answers

У стиля writing-mode есть такой параметр. Прочитайте о нём, там их несколько

.block {
  display: inline-block;
  background: gray;
}

.vertical-text {
  writing-mode: sideways-lr;
}
<div class="block">
  <div class="vertical-text">Вертикальный текст</div>
</div>

Так же есть вариант реализовать это при помощи transform: rotate, но придётся поизвращаться над конечным результатом

.block {
  display: inline-block;
  width: 30px;
  height: 200px;
  background: gray;
  position: relative;
}

.vertical-text {
  transform-origin: left top;
  transform: rotate(-90deg) translateY(-50%);
  position: absolute;
  left: 50%;
  bottom: 0;
  white-space: nowrap;
}
<div class="block">
  <div class="vertical-text">Вертикальный текст</div>
</div>

Answered by De.Minov on December 26, 2021

Например можно transform применить.

#blok{
    width: 50px;
    height: 150px;
;
}
#blok p{
    transform: rotate(90deg);
}
<div id="blok">
    <p>Переворачиваемый текст</p>
</div>

Answered by Андрей Солуянов on December 26, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP