html - 在 div 上以不同方式显示文本

Question

我有以下垂直显示文本的代码。 FIDDLE

    <div id="btn-toggle-menu">

         M
         e
         n
         u

    </div>

CSS:

    #btn-toggle-menu {
       top:0;
       left:0;
       width:20px;
       cursor:pointer;
       font-weight:bold;
       background-color:#ccc;
       text-align:center;
       white-space: pre;
    }

订单:

我希望文本显示为指向所需菜单文本的文本。谁能给我一个 fiddle 演示？

Answer 1

检查这个link

CSS

#btn-toggle-menu {

    top:0;
    left:0;
    width:20px;
    height:500px;
    cursor:pointer;
    font-weight:bold;
    background-color:#ccc;
    text-align:center;
    white-space: pre;
    vertical-align:middle;
}
#inner-div
{
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform: rotate(-90deg);
    white-space:nowrap;
    margin-top:150px;
}