Vertical Text with jQuery

Question

I'm looking to vertically align text by adding <br /> tags between characters with jQuery.

<div id="foo"><label>Vertical Text</label></div> 

would look like this:

V
e
r
t
i
c
a
l

T
e
x
t

Answer 1

Let's go golfing!

$('#foo label').html($('#foo label').text().replace(/(.)/g,"$1<br />"));

Completely untested, but the pattern in the regex looks like a boob.

Answer 2

Mr Kurt's answer works well for a single id, but if you want something more useful that can be applied to several elements try something like this:

$.each( $(".verticalText"), function () { $(this).html($(this).text().replace(/(.)/g, "$1<br />")) } );

Then just set class="verticalText" on the elements you want to be formatted like this.

And as a bonus it keeps the boob regex.

Answer 3

Not tested, but it should work.

var element = $( '#foo label' );
var newData = '';
var data = element.text();
var length = data.length;
var i = 0;

while( i < length )
{

    newData += data.charAt( i ) + '<br />';
    i++;

}

element.html( newData );