使用 jQuery 的垂直文本答案

【问题标题】：Vertical Text with jQuery使用 jQuery 的垂直文本
【发布时间】：2008-11-10 19:49:52
【问题描述】：

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

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

看起来像这样：

V
电子
r
t
我
c
一个
l

T
电子
x
t

【问题讨论】：

标签： jquery vertical-text

【解决方案1】：

我们去打高尔夫球吧！

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

V
e
r
t
i
c
a
l

T
e
x
t
就是这样。
最后一行必须是：element.html(newData);
确实如此。这比我的回答好。

【解决方案4】：

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

编辑：一杆进洞！

【讨论】：

【解决方案5】：

这建立在 Sebastian 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】：

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

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

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

【讨论】：