I have different containers of different sizes and they are all dynamic in size.
All containers have text inside them.
I want all text in all containers to be at the maximum font size the container can support without overflow. I don’t only want to calculate the font-size as a linear function of the container’s sides (as opposed to some existing questions).
I tried a bunch of calculation and clamp properties.
I tried to use ch measurements but they require a non-trivial calculation into the number of lines the text would be split into and is further complicated with word breaks.
I tried using JavaScript to achieve this, and more or less did so. However my JS solution loops over every such element and increases their text size until they overflow, or if they overflow decreases their font size until it no longer overflows, in in/decrements of 1px. However this does not scale to 100s of containers.
You need to sign in to view this answers
