I have a <div> that is always a certain width (100% of screen, screen is 800px wide). Inside that div I place some text, but that text can change.

I want the entire text to always fit inside the container, by changing the font size. For example the images below; the top has font-size: 260px, the bottom one 60px.

I am fine with using a pure CSS solution, or a combination of CSS and JavaScript. I found some solutions about CSS containers, but they work when changing the container size (which in my case is always the same). I also found measureText in JavaScript, but I fail to see how I can translate pixel size of a word/sentence to a font-size.

How can I scale my text in such a way it always fits?