How do I dynamically resize text in a fixed div based on amount of content?

Question

I'm looking for a solution to dynamically change the font size depending on the amount of text so the content never overflows.

Note that what I'm looking for is a solution for variable content , not variable container.

EDIT: There are many answers like this related to text fit in a variable container. That's not what I'm looking for. I want the text to resize gradually when I change the amount of text.

Thanks in advance!

 .container { width: 100px; height: 100px; background-color: grey; }

 <div class="container"> <h1>Some variable text</h1> <p>More variable text here</p> </div>

Answer 1

There are a couple of libraries out there that do this. Big-text.js is one of them, but hasn't been developed in a few years. There are several others, all based on jQuery.

https://github.com/BrOrlandi/big-text.js

If you want to roll your own, take a look at this SO thread: Auto-size dynamic text to fill fixed size container