How to display <h1> element vertically (every character on a new line)

Question

I have a h1 element that looks something like this:

But I want the output to look something like this:

Is there a way that we can achieve it in HTML5? CSS3? JavaScript? JQuery? Please let me know. Thank you.

Answer 1

As requested by @Ethyl I'm posting this as an answer

You can use word-wrap CSS property. You set a small width and break-word for the word-wrap property. Check this fiddle http://jsfiddle.net/1eje4uu4/ .

HTML

<h1>Hello</h1>

CSS

h1 {
    width: 5px;
    word-wrap: break-word;
}

I can't tell you how reliable is this option, but it's one way to go.

Answer 2

您可以在<H1>使用<BR> 。

 <H1>H<BR>e<BR>l<BR>l<BR>o</H1> 

Answer 3

<h1>H<br>E<br>L<br>L<br>O</h1>

And the output

H
E
L
L
O

Answer 4

Use this jQuery :

$('h1').html($('h1').html().split('').join('<br>'))

Working example

** this will work on dynamic text.Check this with dynamic data