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

我有一个div（我希望它看起来像一个按钮），我垂直显示其中的文本。我希望文本看起来整洁。我怎么做

---

我想，你的问题解决了。试试这个

HTML:

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

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

尝试使用此

---

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

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

文本与中心对齐

---

演示：

定义整洁。这是一个关于编程问题而不是设计问题的网站，所以除非你能向我们展示你想要的外观，否则我们无法真正帮助你。“整洁”不是基于强烈的反对吗？现在它就像H i e M e n u（垂直）。我想将其显示为隐藏菜单（垂直），您应该相应地设置行高。是否要旋转字符？

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

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

 M
 e
 n
 u
</div>

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

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