Show text in vertical format - html

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/

Answer 2

try below code. it would 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

with CSS:
<style>
h1 span { display: block; }
</style>
<h1>
<span> H </span>
<span> E </span>
<span> L </span>
<span> P </span>
</h1>
With 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>
Source: http://code.tutsplus.com/tutorials/the-easiest-way-to-create-vertical-text-with-css--net-15284