Вертикальный текст с помощью jQuery

Я хочу вертикально выровнять текст, добавив теги <br /> между символами с помощью jQuery.

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

будет выглядеть так:

V
e
r
t
i
c
a
l

T
e
x
t

Ответ 1

Отпустите гольф!

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

Полностью непроверенный, но шаблон в регулярном выражении выглядит как сиська.

Ответ 2

Г-н Курт отвечает хорошо для одного идентификатора, но если вам нужно что-то более полезное, которое может быть применено к нескольким элементам, попробуйте что-то вроде этого:

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

Затем просто установите class="verticalText" на элементы, которые вы хотите отформатировать следующим образом:

И в качестве бонуса он сохраняет регулярное выражение boob.

Ответ 3

Не тестировалось, но оно должно работать.

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

Ответ 4

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

Изменить: Отверстие в одном!

Ответ 5

Это основывается на ответе Себастьяна H, но я его протестировал, и это работает

    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++;
    }

Ответ 6

Зачем использовать цикл while, когда вы можете использовать jQuery для каждого метода?

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

Там. Оно работает. Вы можете проверить его.