jquery - 使用 jQuery 的垂直文本

Question

我希望通过<br />使用 jQuery 在字符之间添加标签来垂直对齐文本。

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

看起来像这样：

V
e
r
t
i
c
a
l

T
e
x
t

Answer 1

我们去打高尔夫球吧！

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

完全未经测试，但正则表达式中的模式看起来像一个胸部。

Answer 2

Kurt 先生的答案适用于单个 id，但如果您想要更有用的东西可以应用于多个元素，请尝试以下操作：

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

然后只需设置class="verticalText"要像这样格式化的元素。

作为奖励，它保留了 boob 正则表达式。

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

Answer 4

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

编辑：一杆进洞！

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

Answer 6

既然可以使用 jQuery 的内置 each 方法，为什么还要使用 while 循环？

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

那里。有用。你可以测试一下。