如何让我的<h5>垂直适合父div？

Question

我遇到了问题，似乎无法找到解决方案。

我有一个嵌套在几个div中的标题标记 - 这是它的外观：

<div class="card">
  <div class="layout-left">
    <div class="card-header">
       <h5> I am supposed to be a straight vertical line </h5>
     </div
   </div>
   ... (other divs)
</div>

基本上我的问题是我试图让我的h5标签垂直，所以我做了

transform: rotate(-90deg);

然而，它似乎保持在父div所处的宽度，所以我的字母而不是间隔它们串起来。我确实遗漏了div中的一些内容来减少代码，这就是为什么有些div是弹性框等等。

这是一个jfiddle所以你可以看到我的意思..如果解决方案必须在Javascript或JQuery库中我完全没问题，但如果有解决方案我喜欢它。

感谢您的帮助：）

Answer 1

删除width:100%并添加white-space:nowrap。

https://jsfiddle.net/c2xm1jog/

.card-header h5 {
  color: white;
  transform: rotate(-90deg);
  white-space: nowrap;
}