html - ボタンの縦書きテキストがきれいに見える

Question

私はdiv（ボタンのように見せたい）を持っていて、その中のテキストを垂直に表示しています。文字をきれいに見せたい。どうすればいいですか？フィドル

    <div id="btn-toggle-menu">Hide Menu</div>

CSS:

    #btn-toggle-menu {
       position:fixed;
       width:10.9px;
       line-height:25px;
       cursor:pointer;
       border:1px solid #333;
       background-color:#ccc;
       text-align:center;
       font-weight:bold;
       font-size:20px;
       word-wrap: break-word;
   }

Answer 1

問題は解決したと思います。これを試して

HTML:

<div id="btn-toggle-menu">
    <div style="width:10px;">
        Hide Menu
    </div>
</div>

CSS:

#btn-toggle-menu {
    position:fixed;
    width:25px;
    line-height:25px;
    cursor:pointer;
    border:1px solid #333;
    background-color:#ccc;
    text-align:center;
    font-weight:bold;
    font-size:20px;
    word-wrap: break-word;
    padding-left:8px;
}

ライブデモ

Answer 2

このDEMOを使ってみてください

<div id="btn-toggle-menu">H
 i
 d
 e

 M
 e
 n
 u
</div>

CSS:

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