Quiero escalar la fuente del texto en el círculo si se desborda. Si está desbordado, quiero que el texto cambie de tamaño hasta que quepa dentro del círculo. Eventualmente codificaré en texto dinámico, por lo que necesito encontrar una solución que pueda verificar el desbordamiento cada vez que se vuelve a procesar.

He estado tratando de hacer esto con Javascript y React.js, sin embargo, me está costando encontrar una solución. Mi idea actual es crear una función llamada changeFontSize y hacer un condicional donde compruebo si el ancho del texto es mayor que el ancho del círculo. Luego siga disminuyendo el tamaño hasta que el texto quepa.

Todavía soy bastante nuevo en Javascript, así que no estoy seguro de cómo ejecutar esto. Quiero poder hacer esto sin llamar a un paquete para que lo maneje por mí.

 .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>