垂直显示按钮中的文本

Question

我的页面中有一个按钮。如何垂直显示按钮文本？

<div id="btn-toggle-menu">Menu</div>
#btn-toggle-menu {
   position: fixed;
   top: 0;
   left: 0;
   width: 20px;
   line-height: 30px;
   cursor: pointer;
   border: 1px solid #333;
   background-color: #ccc;
   text-align: center;
} 

DEMO 我希望“菜单”显示如下：

M
e
n
u 

Answer 1

实现此目的的最简单方法是使用white-space: pre;，或者您可以使用word-wrap: break-all;（您必须在此处修改宽度）作为备用。

Demo

#btn-toggle-menu {
    position:fixed;
    top:0;
    left:0;
    width:20px;
    cursor:pointer;
    border:1px solid #333;
    background-color:#ccc;
    text-align:center;
    white-space: pre;
}

Answer 2

试试这个： - http://jsfiddle.net/adiioo7/FWzAS/4/

<强> CSS： -

#btn-toggle-menu {
    position:fixed;
    top:0;
    left:0;
    width:13px;
    line-height:30px;
    cursor:pointer;
    border:1px solid #333;
    background-color:#ccc;
    text-align:center;
    word-wrap: break-word;
}

Answer 3

只需在字母之间添加间隔，然后调整<br />上的边距以收紧间距。

<div>M<br />e<br />n<br />u</div>

中号
è
ñ
ü

Answer 4

您也可以尝试这个

div#btn-toggle-menu {  
    width: 60px;  
    font-size: 50px;  
    word-wrap: break-word;  
    letter-spacing: 20px;
    text-align:center;
}

DEMO-1 (Big)和DEMO-2 (Small)。