0

I've kind of simplified my code but it looks more or less like this:

<div id = "updatedText"></div>
<script type = "text/javascript">

var rand = 0;
if(var rand == 0)
{
      document.getElementById("updatedText").innerText = "short text";
}
else
{
      document.getElementById("updatedText").innerText = "much longer text that needs to be rescaled";
}

</script>

Basically the variable rand will change between certain values and based on those values the text will get longer or shorter and I want it to remain in the same fixed area so it should auto re-scale to fit it.

Pauk_Jhonson
  • 45
  • 2
  • You can create a canvas element, set its font and size, then use its [`measureText()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/measureText) method to get the text's dimensions. Use that to find a suitable font size to fit the div. –  Apr 21 '20 at 00:04
  • 1
    Does this answer your question? [Font scaling based on width of container](https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container) – Blend3rman Apr 21 '20 at 00:05
  • if you can't or don't want to use canvas, use the `.innerText.length` as a comparation value, and manually reduce or increase the fontsite, either by adding css, or manipulating the style element directly – balexandre Apr 21 '20 at 00:06

0 Answers0