Texto vertical con jQuery

Question

Estoy buscando alinear verticalmente el texto agregando etiquetas <br /> entre caracteres con jQuery.

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

se vería así:

V
e
r
t
i
c
un
l

T
e
x
t

Answer 1

No se ha probado, pero debería funcionar.

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 2

Esto se basa en la respuesta de Sebastián H, pero he comprobado y esto funciona

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

Vamos a jugar al golf!

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

Completamente no probado, pero el patrón en la expresión regular parece un boob.

Answer 4

¿Por qué utilizar un ciclo while cuando puede usar el método integrado de jQuery en cada método?

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

Hay. Funciona. Puedes probarlo

Answer 5

la respuesta del Sr. Kurt funciona bien para un único ID, pero si quieres algo más útil que se puede aplicar a varios elementos de probar algo como esto:

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

A continuación, sólo establece class="verticalText" de los elementos que querer ser formateado así

Y como bonificación mantiene la boog regex.

Answer 6

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

Editar: Agujero en uno!