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
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
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
