How do I scale a text element (h1) based on its length?I want to scale a h1 element on the whole screen, both based on the screen's width as well as the elements width. How do I do that?


h1 {
font-size : clamp (6rem, 12vw, 20rem);
position : fixed;
top : 50% ;
left : 50% ;
transform : translate (-50%, -50%);
width : 100% ;
text-align : center;
}

< h1 > Hey </ h1 >

this is the code for scaling based on the screen's width, but i have no idea how to scale it do it doesnt go on another line.

To scale the `h1` element based on both the screen's width and the element's width while also making sure it doesn't go on another line, you can use the `white-space: nowrap` property. This property prevents the text from wrapping to the next line and keeps it on a single line. Here's an updated code example:

```
h1 {
font-size: clamp(6rem, 12vw, 20rem);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: auto;
max-width: 100%;
white-space: nowrap;
text-align: center;
}
```

In this updated code, we've removed the `width: 100%;` property and added `width: auto;` and `max-width: 100%;` instead. This allows the `h1` element's width to adjust based on its content, but with a maximum width of 100% of the screen's width. We've also added `white-space: nowrap` to prevent the text from wrapping to the next line.

With these changes, the `h1` element should scale based on both the screen's width and the element's width, while also staying on a single line.