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.

conceptdeluxe · Answer 1 · 2013-06-22T09:41:39.853

3

There are several possibilities for making stuff like this. One of the easiest approaches would be to insert a <br> tag after each letter...

HTML:

<div>foo bar</div>
<button>button</button>

JS:

var state, $div = $('div');
$('button').click(function(){
    if (!state) {
        $div.html($div.html().split('').join('<br>'));
        state = true;
    } else {
        $div.html($div.html().split('<br>').join(''));
        state = false;
    }
});

See:

http://jsfiddle.net/bkkK6/22/

Edit:

split/join if you like it more ... :D

edited Jun 22 '13 at 09:41

answered Jun 22 '13 at 08:34

conceptdeluxe

3,753
3
25
29

how can I toggle between normal text and vertical text on button click? – Jun 22 '13 at 08:44
check out: http://jsfiddle.net/bkkK6/10/ ... this does what you want although it could be coded cleaner ;) – conceptdeluxe Jun 22 '13 at 08:49
@roasted i see your fiddle but if i will replace space with nbsp then that will also become inefficient even more than than this answer – bugwheels94 Jun 22 '13 at 09:14
@conceptdeluxe using split and join function will reduce your code size by 80% – bugwheels94 Jun 22 '13 at 09:21
@roasted no that wold be efficient because you were inserting space between words but this is inserting space blindly between letters – bugwheels94 Jun 22 '13 at 09:30
@ankit can you give us a demo code using split and join function. – Jun 22 '13 at 09:40
1

@Fakhruddin Ujjainwala ... here it is – conceptdeluxe Jun 22 '13 at 09:42

bugwheels94 · Accepted Answer · 2013-06-22T09:35:29.483

2

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

edited Jun 22 '13 at 09:35

answered Jun 22 '13 at 08:40

bugwheels94

30,681
3
39
60

2

this is a clever solution. But why are you setting height? What about spaces between words? – A. Wolff Jun 22 '13 at 08:44
I would like to toggle it to normal txt on button clicks. – Jun 22 '13 at 08:46
ggg var $options = $('#draggable1').text(); I am unable to get the div text into $options. – Jun 22 '13 at 09:54
Object my name has no method 'width' – Jun 22 '13 at 10:16
try asking a new question on stackoverflow – bugwheels94 Jun 22 '13 at 10:17

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

2 Answers2