Show text in vertical format

Question

<span class="helpBtn">HELP</span> help text must remain within range

• It should look like this:

• I tried to convert the text, but that does not give me the correct solution.

• Actually, I don’t want to change the text within the range. It should remain within the range, as I showed. It cannot be edited.

Answer 1

Try to break the word in css. If you need more spacing and your words break, each 2 or more letters use a letter spacing or just an addition.

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/

Answer 2

try entering the code below. It will definitely help you.

<div class="vertical-text">Hello Vertical Texter!</div>
<style>
  .vertical-text {
   background: #e23737 none repeat scroll 0 0;
   border: 1px solid #b52c2c;
   box-shadow: 2px -2px 0 rgba(0, 0, 0, 0.1);
   color: #fff;
   float: left;
   margin-left: 40px;
   padding: 10px;
   text-transform: uppercase;
   transform: rotate(90deg);
   transform-origin: left top 0;
}   
</style>

Answer 3

CSS:

<style>
  h1 span { display: block; }
</style>

<h1>
<span> H </span>
<span> E </span>
<span> L </span>
<span> P </span>
</h1>

Javascript:

<style>
   h1 span { display: block; }
</style>

 <h1><span> HELP </span></h1>

<script>
   var h1 = document.getElementsByTagName('h1')[0];
   h1.innerHTML = '<span>' + h1.innerHTML.split('').join('</span><span>') +'</span>';
</script>

: http://code.tutsplus.com/tutorials/the-easiest-way-to-create-vertical-text-with-css--net-15284