Vertical text with css (90º)

You can use transform: rotate(270deg) to leave the text vertically as the image.

Outside the rotate (which will change the entire div) if you just want to change the writing, without affecting background , border and spaces, you can use writing-mode .

O is by default as horizontal-tb , and will have the following options:

horizontal-tb

Content follows horizontally from left to right and vertically from top to bottom. The next horizontal line is positioned below the previous line.

.foo { writing-mode: horizontal-tb; }

<div class="foo">
Olá mundo novo!<br>
Quebra de linha
</div>

vertical-rl

Content runs vertically from top to bottom and horizontally from right to left. The vertical line next to it is positioned to the left of the previous line.

.foo { writing-mode: vertical-rl; }

<div class="foo">
Olá mundo novo!<br>
Quebra de linha
</div>

vertical-lr

Content runs vertically from top to bottom, horizontally from left to right. The next vertical line is positioned to the right of the previous line.

.foo { writing-mode: vertical-lr; }

<div class="foo">
Olá mundo novo!<br>
Quebra de linha
</div>

There is also the direction property, which supports the ltr (left to right) and rtl values (right to left), but this is generally used for text with characters from different lineages if it is useful if combined with unicode-bidi: bidi-override; ).

No unicode-bibi :

.foo { direction: ltr; }
.baz { direction: rtl; }

<div class="foo">Olá mundo novo!</div>
<div class="baz">Olá mundo novo!</div>

With unicode-bidi :

.foo {
    direction: ltr;
    unicode-bidi: bidi-override;
}
.baz {
    direction: rtl;
    unicode-bidi: bidi-override;
}

<div class="foo">Olá mundo novo!</div>
<div class="baz">Olá mundo novo!</div>

  

• Note that there is still sideways-rl and sideways-lr (probably this was what you needed), but are experimental and not supported by all browsers.
  / li>   

• Also note that the lr , lr-tb , rl , and tb-rl values are deprecated but are still supported by SVG1 or older browsers:

  

Another suggestion.

.textovertical{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; 
    white-space: pre-wrap;
}

<p class="textovertical">
Olá esse é um texto vertical !
</p>