Html 旋转文本有问题

在练习了一些CSS之后，我发现我遇到了一个问题，尽管尝试了很多事情，但我似乎无法得到我想要的。我将文本转换为垂直的灰色div，但我似乎无法得到它，因此所有单词都显示在一行上。我该怎么做？我认为，一旦我得到了，应该很容易将它们放在中心位置

---

您应该首先使用

变换和绝对定位将文本居中。然后只需应用
旋转
变换（默认情况下围绕中心点）：

.
请注意，
元素的
宽度
将刚好填充包含按钮的宽度，该按钮的宽度很小（因此为文本换行）。因此，您必须明确地将
宽度设置为尽可能大（这并不重要），以便文本在一行中跨越。
本文介绍了一种处理垂直文本的好方法，即将垂直文本放置在一行中，并根据需要占用尽可能多的垂直空间：

第一个例子似乎就是您的案例（压缩表标题）。
css{white space:nowrap；}您也可以使用单词break:keep all；回答得好！非常感谢！
#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);
}