Javascript 通过减小字体大小，使文本适合固定高度和固定宽度的div

你们提到的所有这些复制品只涉及div的宽度。我还需要说明div的高度。因此，内容也不能超出div高度。我尝试了所有类似的问题和答案，没有一个包含文本，文本总是在高度上溢出

我尝试过的问题示例如下： 1. 2.

现在来回答问题

我有一个固定高度和宽度的div。我需要的文字，以减少字体大小作为文本内容长度的大小增加，使其溢出。我在这里看到了几个只涉及div宽度的其他问题。因此，有了这些解决方案，我的文本将垂直溢出

我真的不在乎解决方案是使用CSS还是javascript。提前谢谢你的帮助

这是我试图使用的代码：

<div class="box">
  <span>
    This is a really long sentence to demonstrate how it doesn't fit inside the box and doesn't do what I want.
  </span>
</div>

.box {
  margin: 10px;
  width: 200px;
  height: 50px;
  border: 1px solid black;
}

这是一个很长的句子来说明它是如何不适合在盒子里，不做我想做的事情。
.盒子{
利润率：10px；
宽度：200px；
高度：50px；
边框：1px纯黑；
}

---

以下是JSFIDLE:

您可以通过使用Javascript函数计算正确的字体大小来实现这一点：

const-box=document.getElementById（'box'））
const text=document.getElementById（'text'）；
const-boxHeight=parseInt（window.getComputedStyle（box.height））；
const getTextHeight=（）=>parseInt（window.getComputedStyle（text.height）；
const getTextFontSize=（）=>parseInt（window.getComputedStyle（text.fontSize）；
while（getTextHeight（）>boxHeight）{
text.style.fontSize=getTextFontSize（）-1+'px'
}

.box{
利润率：10px；
宽度：200px；
高度：50px；
边框：1px纯黑；
}

这是一个很长的句子来说明它是如何不适合在盒子里，不做我想做的事情。