I try to use a container query to scale text in a h2 tag to the width of the container.
What I have now is this:
<!doctype html>
<html>
<head>
<style>
.container {
container-type: inline-size;
border: 1px solid red;
container-name: testc;
}
@container testc (width > 600px) {
h2 {
font-size: 3cqw;
}
}
</style>
</head>
<body>
<div class="container">
<h2>Some text.</h2>
</div>
<div class="container">
<h2>A lot of text, that will need to scale down, because it is so long.</h2>
</div>
</body>
</html>
And this renders as:
and when the window is larger, it renders thus (text size scale with the container):
What I want though, is that renders like this:
So, basically, I want the font-size to change when the rendered text is of a certain size, without changing the container size.