0

I have an h1

<h1>Title Of Thing<h1>

The h1 is 200px width

h1{width:200px;}

While the h1 is indeed 200px wide, the text inside of the h1 does not fit that entire width.

I would expect to be able to make font-size 100%

h1{font-size:100%;}

But of course that only makes the font-size 100% of the default and has nothing to do with the h1 container.

I need the font size inside of the h1 to dynamically fit the width of the H1 because I want to change the width of the h1 sometimes. This means that the hight of the h1 of course needs to adapt so that the text does not get clipped.

I am disappointed that this is not the default behavior of H tags.

There is something called fit-content which does the exact opposite of what I need.

h1{width: fit-content;}

This makes the h1 shrink to the size of the text inside of it. But I need the text to expand to the size of the H1.

Joshua Robison
  • 1,868
  • 4
  • 20
  • 24
  • some research led me to some solution of adding the text inside the h1 tags as an svg but that did not help because when changing the text just a little I have to adjust the viewspace of the svg to fit the text manually and it came back to the same problem again. I have also seen people come up with fancy solutions using JavaScript, but I am holding out for a css/html solution. Maybe h1 is not the best thing to use? is there another tag that works this way , label , table-label etc? – Joshua Robison Jan 28 '23 at 07:36
  • It is also sad that I can use font-size: 100vw for the view-port but there is no such thing as font-size:100cw for the width of the container. You would think that font-size:100% would be 100cw but font-size 100% is not the same as width:100% which is so frustrating. CSS needs CW and CH and CMIN CMAX just like vh vw vmax vmin. That would be the answer to my question cause I could just do font-size:100cw – Joshua Robison Jan 28 '23 at 07:45
  • transform: scale( ); might have something promising if I could scale(100%-container-width) /not viewport width but container width/ ALSO, scale scales from the center and then a transform is needed to re-center the text. It is annoying and clunky. – Joshua Robison Jan 28 '23 at 07:51

1 Answers1

0

The answer to my question is something called container queries. The following code made the text inside the h1 scale to the full width of the h1 responsively.

h1{
container-type: inline-size;
font-size: 12cqw;
}
Joshua Robison
  • 1,868
  • 4
  • 20
  • 24