Question

单独使用CSS，是否可以使文本行尽可能大，以适应div随机宽度和高度而不包装？

vh和vw单位似乎很有希望，但它似乎不是答案。

Answer 1

您可以使用javaScript并使字体越来越小（或越来越大），直到具有文本的子元素的高度适合父元素的高度。更改文本的font-size和容器的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

动态调整字体大小

2 个答案: