Daniel Contreras Daniel Contreras - 4 months ago 8
CSS Question

How can I make my <h5> fit vertically into a parent div?

I am having a problem and can't seem to find the solution.

I have a header tag nested inside a few divs - here's how it looks:

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

And essentially my problem is that i'm trying to make my h5 tag be vertical, so i did a

transform: rotate(-90deg);

however it seems to stay at the width that the parent div is at so my letters instead of spacing out they bunch up. I did leave out some content within the divs to cut down on the code, so that's why some divs are flex box's and whatnot.

Here is a jfiddle so you can see what I mean.. If the solution must be in Javascript or JQuery library i'm totally fine with it, but if there's a css solution I prefer it.

Thank you for your help :)


Remove width:100% and add white-space:nowrap.


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