html - 垂直显示按钮中的文本

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;
} 

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

菜单
_ 
_ 
_

Answer 1

实现这一点的最简单方法是使用white-space: pre;或者您可以使用word-wrap: break-all;（您必须在此处修复宽度）作为替代方法。

演示

#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/aidioo7/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（大）和DEMO-2（小）。