How to make sure text is being sized to fit no matter how small the container is?

Question

I want to size the text relatively to it's container so that I don't have to worry about oferflowing or wrapping.

Answer 1

This is one of the concepts of the responsive design.

Use em to refer to font size of the parent container.

Set font-size of p in container in em unit,
Set the width of the container in em unit too, then vary the font-size of each container to make different size of the containers, the text size would be relative to its container width.

https://code.sololearn.com/WWYw2x17u4SP/?ref=app

Answer 2

you must use javascript to compute the bounding rect of the text so it fit inside the bounding rect of the container...

that's not very obvious, but could be achieve by kind of binary search (start with some max size and some min size... get the mean and if too small you increase the min size -- mean of max and current sizes -- if too big you decrease the max size -- mean of min and current size until you get min and max with quite no difference)