Dynamic Font Size Based On Container & Text Length
I have a difficult challenge that I'm not sure is currently solvable.
I want to utilize container size units (cqi) to adjust the font-size of text to the container...
BUT
it also needs to take into account the length of the text.
So, a really long title should get smaller, and a really short title should get bigger....
It also needs to support line-clamping, so the text can wrap if necessary to fit.
Is there a way to do this purely in CSS, or is JS required to accomplish this?
Pen: https://codepen.io/nathanchase/pen/rNKqYoX
6 Replies
As far as I can tell, there's no way via CSS alone to detect the width of the text and adjust anything accordingly.
yes js, and even that is not easy
Yeah, this looks to be a discussion around it: https://github.com/w3c/csswg-drafts/issues/2528
GitHub
[css-fonts-4] Feature for making text always fit the width of its p...
This thread shows that it's a widely required feature: https://twitter.com/sindresorhus/status/979363460411609091 Example of a workaround: Open https://tobireif.com/ and (eg using dev tools res...
Stack Overflow
Calculate text width with JavaScript
I'd like to use JavaScript to calculate the width of a string. Is this possible without having to use a monospace typeface?
If it's not built-in, my only idea is to create a table of widths for each
This is interesting... https://kizu.dev/fit-to-width-text/
Fit-to-Width Text
What if I will tell you how we could solve fit-to-width text with pure CSS without any hardcoded parameters? Curiously, scroll-driven animations will allow us to do just that! Join me as I continue exploring the experimental implementations of the latest specs.
but of course, relies on
animation-range which is experimental and not widely supported yet