Dynamically sized font-size

Question

With CSS alone, is it possible to have a line of text be as large as it can be to fit a div random widths and heights without wrapping?

vh and vw units seem promising but it doesn't seem like the answer.

Answer 1

you can use javaScript and make the font size smaller and smaller (or larger and larger) till the height of child element with the text fits the height of parent element. Change the font-size of text and width height of container to see the effect.

var samp = document.getElementById('samp');

fitFont(samp);


function fitFont(elem){
  var child = elem.children[0];
  var getFontSize = parseFloat(window.getComputedStyle(child).getPropertyValue('font-size'));
    
  while(child.offsetHeight>elem.clientHeight){
    getFontSize -= .1;
    child.style.fontSize = getFontSize + 'px';
    if(child.offsetHeight<=elem.clientHeight){
      child.style.visibility = 'visible';
      return;
    }
  }
  while(child.offsetHeight<elem.clientHeight){
    getFontSize += .1;
    child.style.fontSize = getFontSize + 'px';
    if(child.offsetHeight>=elem.clientHeight){
      child.style.visibility = 'visible';
      return;
    }    
  }  
  
}

#samp {
  background-color:white;
  width:280px;
  height:100px;
  border:solid 2px #33aaff;
}

#samp span {
  display: inline-block;
  visibility:hidden;
  font-size:50px;
}

<div id="samp">
  <span>text is bigger now and goes outside of div text is bigger now and goes outside of div text is bigger now and goes outside of div text is bigger now and goes outside of div
  </span>
</div>

Answer 2

The closest thing you're going to get is setting the outer container & text container to vw and vh values, and the font-size of the text container to vmin.

.outer {
  width: 100vw;
  height: 100vh;
}

.text {
  width: 30vw;
  height: 30vh;
  border: solid 1px #269abc;
  font-size: 10vmin;
}

<div class='outer'>

  <p class='text'>This is text</p>

</div>

Other than that, you're gonna need to use javascript/jQuery