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 demo

请注意width元素的<p>只会填充包含按钮的宽度，该按钮很小（因此文本换行）。因此，您必须尽可能明确地设置width（这并不重要），以便文本将跨越一行。

Answer 2

本文描述了放置在一行中并根据需要占用尽可能多的垂直空间的垂直文本的良好方法：http://kizu.ru/en/fun/rotated-text/

第一个例子似乎就是你的情况（紧凑的表头）。

旋转文本的麻烦

2 个答案:

Jsfiddle demo