Vertical Text mit jQuery

Question

Ich bin auf der Suche nach vertikalen Ausrichtung von Text durch Hinzufügen von <br /> Tags zwischen den Zeichen mit jQuery.

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

würde wie folgt aussehen:

V
e
r
t
i
c
ein
l

T
e
x
t

Answer 1

Nicht getestet, aber es sollte funktionieren.

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

Dies baut auf Sebastian H Antwort, aber ich es getestet und das funktioniert

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

des Golf gehen lassen!

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

Völlig ungetestet, aber das Muster in der Regex sieht aus wie eine Boob.

Answer 4

Warum eine while-Schleife verwenden, wenn Sie jQuerys integrierte Methode verwenden können?

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

Es. Es klappt. Du kannst es testen.

Answer 5

Antwort von Herrn Kurt funktioniert gut für eine einzelne ID, aber wenn Sie etwas nützlicher wollen, dass so etwas wie dies auf mehrere Elemente angewendet werden können versuchen:

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

Dann setzen nur class="verticalText" auf die Elemente, die Sie möchte so formatiert sein.

Und als Bonus hält es die Boob Regex.

Answer 6

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

Edit: Hole in one!