Show text in vertical format

Question

<span class="helpBtn">HELP</span> help text should stay inside span

• It should display like this......

• I have tried text transform but it isn't giving me correct solution.

• Actually i don't want to change text inside span. It should stay inside span like i have shown. It shouldn't be edited.

Answer 1

Try breaking word in css. If you need more spacing and your words are breaking each 2 or more letters use letter-spacing or just padding.

CSS:

.wrapper {
   position: fixed;
   background-color: green;
   top: 30px;
   left: 0;
   width: 20px;
   border-radius: 0 10px 10px 0;
   color: white;
   font-size: 13px;
   padding: 5px;
   word-wrap: break-word;
}

HTML:

<div class="wrapper">
    HELP
</div>

https://fiddle.jshell.net/1hwd5j7g/