Văn bản dọc với jQuery

Question

Tôi đang tìm cách căn chỉnh văn bản theo chiều dọc bằng cách thêm <br /> thẻ giữa các ký tự với jQuery.

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

sẽ trông như thế này:

V
e
r
t
i
c
một
l

T
e
x
t

Answer 1

Không kiểm tra, nhưng nó sẽ hoạt động.

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

này được xây dựng trên câu trả lời Sebastian H, nhưng tôi thử nghiệm nó và các công trình này

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

Hãy đi chơi golf!

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

Hoàn toàn chưa được kiểm tra, nhưng mẫu trong regex trông giống như một boob.

Answer 4

Tại sao sử dụng vòng lặp while khi bạn có thể sử dụng nội trang dựng sẵn của jQuery cho mỗi phương thức?

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

Ở đó. Nó hoạt động. Bạn có thể kiểm tra nó.

Answer 5

câu trả lời của ông Kurt hoạt động tốt cho một id duy nhất, nhưng nếu bạn muốn một cái gì đó hữu ích hơn có thể được áp dụng cho một số yếu tố thử một cái gì đó như thế này:

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

Sau đó, chỉ cần đặt class="verticalText" trên các yếu tố bạn muốn được định dạng như thế này

Và như một phần thưởng, nó giữ regex boob.

Answer 6

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

Edit: Hole in one!