jquery - 将 div 中的字符彼此对齐（垂直对齐）

Question

我想在单击按钮时垂直对齐 div 中的文本。

我正在使用 php 和 jquery 框架库。

这就是我想问的：

例如：“myname is xyz”（正常对齐）

垂直对齐

Ex:
m
y

n
a
m
e
....

请指导。

Answer 1

制作这样的东西有几种可能性。最简单的方法之一是<br>在每个字母之后插入一个标签......

HTML：

<div>foo bar</div>
<button>button</button>

JS：

var state, $div = $('div');
$('button').click(function(){
    if (!state) {
        $div.html($div.html().split('').join('<br>'));
        state = true;
    } else {
        $div.html($div.html().split('<br>').join(''));
        state = false;
    }
});

看：

http://jsfiddle.net/bkkK6/22/

编辑：

如果您更喜欢它，请拆分/加入...：D

Answer 2

使用 css 的 word-wrap 属性

 <script>
    $("button").click(function(){
    $("div").html($("div").html().split(" ").join("&nbsp;"));
    if($("div").width()==1)
    {
    $("div").width("100%");
    }
    else
    {$("div").width(1);
    }
    });</script>

演示