垂直文本與jQuery

Question

我期待垂直對齊文字通過在jQuery之間添加<br />字符之間的字符。

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

看起來像這樣：

V
Ë
ř
噸
我
Ç
一個
升

Ť
Ë
X
噸

Answer 1

沒有測試，但是它應該工作。

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

此基礎上塞巴斯蒂安轟的答案，但我測試了它和這個作品

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

讓我們打高爾夫！

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

完全未經測試，但正則表達式中的模式看起來像一個胸部。

Answer 4

爲什麼使用while循環的時候可以使用jQuery的內置每種方法？

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

那裏。有用。你可以測試它。

Answer 5

科特先生的回答非常適用於單個ID，但如果你想，可以適用於多種元素更有用的東西嘗試這樣的事：

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

然後，只需設置class="verticalText"的元素，你想要像這樣格式化。

作爲獎勵它保持胸部正則表達式。

Answer 6

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

編輯： 一桿進洞！