How could one make a line of text fill up the entirety of it's parent container similar specifically to how object-fit: contain; works for images where it does not stretch it but makes sure it fills as much of the space as possible while not getting cut off or stretched.
It should be mentioned the solution I'm looking for should work in React with changing text without much jumping around so it should have all calculations done before firs render.
This question is not SVG specific but is concerned with ANY way of achieving this effect including canvas or other methods.
I'm aware of Pure SVG way to fit text to a box and SVG Scaling Text to fit container but no answer in them has the desired effect. They either calculate the viewBox on mount (and have that flash of incorrect layout) or work by stretching and distorting the text.
Things I've tried thus far:
Thus far the closest I've gotten is by making a component that renders an SVG with a text node inside and on mount inside the useEffect calculates the BBox of the SVG and sets the viewBox accordingly.
The issues with that approach are that there is quite a drastic jump of the test siedways whenever the number of characters changes (like from 0 to 10000 if you're displaying numbers) and in general this problem of jumping around since the bbox changes after the first render so on the first one the viewBox is wrong.
I've tried fixing it by rendering an identical hidden SVG outside of react first and measuring it's bbox and that way being able to have the correct viewBox on the first render but I've not been succesful in that.
