javascript - 如何使我的 <h5> 垂直适合父 div？

Question

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

我在几个 div 中嵌套了一个 header 标签 - 这是它的样子:

<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 是 flex box 等等。

这是一个jfiddle所以你可以明白我的意思.. 如果解决方案必须在 Javascript 或 JQuery 库中，我完全可以接受，但如果有 css 解决方案，我更喜欢它。

谢谢你的帮助:)

Answer 1

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

https://jsfiddle.net/c2xm1jog/

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