How can i make words vertical using CSS

Question

I intend to make vertical words using CSS here is a demo:

How can I achieve it?

Answer 1

p {
  writing-mode: vertical-rl;
  text-orientation: mixed;
 }

<p>I am some cool text</p>

writing-mode: vertical-rl; text-orientation: mixed;

Reference

Answer 2

You can achieve it with text-orientation:

.txt { 
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

<div class="txt">some text</div>

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation

Answer 3

just use transform and rotate

.wrapper {
  margin: 100px 80px;
  transform: rotate(90deg);
  transform-origin: top center;
}

.number {
  display: inline-block;
  transform: rotate(-90deg);
}

<div class="wrapper">
  <div class="item">
    <span class="number">1</span>
    <span class="description">this is one</span>
  </div>
  <div class="item">
    <span class="number">2</span>
    <span class="description">this is two</span>
  </div>
  <div class="item">
    <span class="number">3</span>
    <span class="description">this is three</span>
  </div>
</div>

Answer 4

You need transform: rotate property. Here you can find more info: [enter link description here][1]

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate()