Is it possible to scale text to always fit the width of its container with container queries?
Is there a way (perhaps using container query units) to have text always fit the width of its container? Most of the solutions I've seen have been for static text, but what if you have, say, a blog title that could have any number of characters? Can we have the text always fit the parent?
8 Replies
You mean the text size stays the same but without it overflowing its parent container?
I mean the text size changes to fill the width of its container
so if you have fewer words, the text is larger. If you have more words, the text is smaller. (Within reason, one word shouldn't be huge... probably need a clamp somewhere)
I think you will need to use JS to see how many words are there in the text and throw a couple of if statements and from inside the if statements you decide the font size.
And i believe you need to use the container width as a main coefficient to decide the font size.
Check this if it make sense to you.
that or text within svg
Man love your thinking.. that's way better and easier 🙌
Interesting, thanks folks.
Weird how there isn't a CSS solution