<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ライブラリになければならない場合、私はそれで完全に問題ありませんが、CSSソリューションがあれば好きです。

はあなたの助けをありがとう:)

Answer 1

はwidth:100%を削除し、white-space:nowrapを追加します。本当に簡単な解決策だった

https://jsfiddle.net/c2xm1jog/

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