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

Answer 3

首先想到的是使用宽度 = 1em（字母 M 的一个宽度）并在预模式中使用空白：

#btn-toggle-menu {
    text-align: center;
    width:1em;
    word-wrap: pre;
}

文本与中心对齐。

演示：http: //jsfiddle.net/6v2Cm/5/