Question

我有一个div（我想看起来像一个按钮），我正在垂直显示文本。我希望文字看起来整洁。我该怎么做？ FIDDLE

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

<强> Live Demo

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

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

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

文字与中心对齐。

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

按钮中的垂直文本看起来整洁

3 个答案: