1

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>
Nil Suria
  • 474
  • 4
  • 15
  • 2
    You could use `text-overflow: ellipsis;` - won't change *size* but will fit to content. Just an alternative option. – freedomn-m Aug 25 '20 at 16:37
  • Does this answer your question? [Font scaling based on width of container](https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container) – freedomn-m Aug 25 '20 at 16:37
  • @freedomn-m no, this does not answer my question. I'm looking for a solution with variable content, not variable container. text-overflow: ellispsis is not what I'm looking for since what i want is to resize the font so the text fits inside the container not depending of the amount of text. – Nil Suria Aug 25 '20 at 16:42

1 Answers1

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

cpilko
  • 11,792
  • 2
  • 31
  • 45