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

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