Change font size based on container

Issue

I want to scale the font of the text in the circle if it overflows.
If it is overflowed I want the text to resized until it fits inside the circle. I’ll eventually be coding in dynamic text, so I need to find a solution that is able to check overflow every time it’s re-rendered.

I’ve been trying to do this with Javascript and React.js, however I’m having a hard time finding a solution. My current idea is to create a function called changeFontSize and do a conditional where I check if the text width is greater than the circle width. Then keep decreasing the size until the text fits.

I’m still quite new to Javascript, so I’m unsure how to execute this.
I want to be able to do this without calling in a package to handle it for me.

.circle { 
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid red;
  line-height:50px;
  text-align:center;
}

<div class="circle">circleCIRCLEcircle</div>

Solution

There’s a great npm package called fitty that will fit the text to the size of the container automatically:

<div id="my-element">Hello World</div>

<script src="fitty.min.js"></script>
<script>
    fitty('#my-element');
</script>

Answered By – Joseph

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0