Vertical Text with jQuery

Question

I\'m looking to vertically align text by adding
tags between characters with jQuery.

Vertical Text&l         


        
                      

              相关标签:
       
      

Answer 1

document.write("vertical text".split("").join("<br/>"));

Edit: Hole in one!

Answer 2

This builds on Sebastian H's answer, but I tested it and this works

    var element = $( '#foo label' );
    var newData = '';
    var data = element.text();
    var length = data.length;
    var i = 0;
    $( '#foo label' ).html("");
    while( i < length )
    {
            $( '#foo label' ).append(data.charAt( i ) + "<br />")
            i++;
    }

Answer 3

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 4

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 );

Answer 5

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 6

Why use a while loop when you can use jQuery's builtin each method?

$.each( $('#foo').text(), function(){ $('#foo').append(this + '
'); } );

There. It works. You can test it.