旋转文字出现问题

Question

在练习了一些CSS之后，我一直在学习，但是遇到了一个问题，尽管尝试了很多事情，但我似乎还是无法得到想要的东西。 我将文本转换为垂直适合灰色的div，但我似乎无法理解，因此单词全部显示在一行上。 我如何做到这一点？ 我认为，一旦我知道将它们放置在中央位置应该很容易。

http://jsfiddle.net/#&togetherjs=DGHlFmn0Hg

Answer 1

您应该首先使用transform和绝对定位使文本居中。 然后只需应用rotate变换（默认情况下围绕中心点）：

#headline .buttons {
  height:100%;
  width:50px;
  background:#a5a5a5;
  float:right;
  margin-right:3px;
  color:#fff;
  /* add this */
  position:relative;
}

#headline .buttons p {  
  margin:0;    
  text-align:center;    
  position:absolute;
  width:260px;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%) rotate(-90deg);
}

Jsfiddle演示 。

需要注意的是width的的<p>元素将正好填满含有按钮，这仅仅是小的（因此文本换行）的宽度。 因此，您必须显式地设置尽可能大的width （这并不重要），这样文本才能跨越一行。

Answer 2

本文介绍了一种放置在一行中的垂直文本的好方法，该文本需要占用尽可能多的垂直空间： http ： //kizu.ru/en/fun/rotated-text/

第一个示例似乎完全符合您的情况（紧凑的表头）。