Css 通过增加字体填充剩余空间

我有一个问题，我想通过尽可能增加（和减少）字体大小来填充框的剩余（非常动态）空间

现在，我所拥有的只是：

.textbox {
  margin: 0 5em;
  margin-top: 0.5em;
  width: 80%;
  font-size: 30px;
  white-space: pre-wrap;
}

该页面将在1920x1080 50英寸电视上观看，并具有100%的窗口缩放

我将添加和删除部分，直到屏幕上只有一个部分，最多4个

---

非常感谢您的帮助！

以下是解决您问题的方法：

$(document).ready(function() {
    $('.textbox').each(function() {
        let that = $(this),
            textBoxHeight = parseInt(that.height()) + 20, // +20 its sum of margin-top + margin-bottom  of .textbox element
            parentHeight = parseInt(that.parent().height()),
            fontSize = parseInt(that.css('font-size'))

        while(textBoxHeight > parentHeight)
        {
            fontSize -= 1
            that.css({'font-size':fontSize+'px'})
            textBoxHeight = parseInt(that.height()) + 20 // +20 its sum of margin-top + margin-bottom of .textbox element
        }
    })
})

CSS已更改（em中的边距>px）

因此，您需要将

.textbox

字体大小设置为
100px
，然后在JS中我们一直将其降低，直到
的高度。textbox
元素不等于或低于其父元素。它非常简单，工作正常

我希望这就是你问题的答案

别忘了使用jQuery库。
所以你想让这些文本始终适合于框，以避免在框上滚动，对吗？这不是CSS作业。：）可能会有帮助，但我认为这只是宽度，而不是高度。
.textbox {
    margin: 10px 20px;
    width: 80%;
    font-size: 100px;
    white-space: pre-wrap;
}