Align the characters in div one below the other (vertical align)

Question

I would like to vertically align the text in div on the click on a button.

I am using php and jquery framework library.

This is what I am trying to ask:

Ex: "myname is xyz" (normal alignment)

Vertical alignment

Ex:
m
y

n
a
m
e
....

Please guide.

Answer 1

Use word-wrap property of css

 <script>
    $("button").click(function(){
    $("div").html($("div").html().split(" ").join("&nbsp;"));
    if($("div").width()==1)
    {
    $("div").width("100%");
    }
    else
    {$("div").width(1);
    }
    });</script>

DEMO