动态调整字体大小

Question

单独使用CSS，有没有可能让一行文本尽可能大，以适应div的任意宽度和高度而不换行？

大众和大众似乎前景看好，但这似乎不是答案。

Answer 1

您可以使用javaScript并使字体变得越来越小(或越来越大)，直到带有文本的子元素的高度适合父元素的高度。更改text的font-size和container的width height即可查看效果。

​

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

您将得到的最接近的结果是将外部容器&文本容器设置为vw和vh值，并将文本容器的字体大小设置为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>

​

除此之外，您还需要使用javascript/jQuery