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

Question

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

http://jsfiddle.net/urqL1evn/2

现在，我只有:

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

页面将在 1920x1080 50"电视上以 100% 窗口缩放比例查看。

我会添加和删除部分，使屏幕上只有一个，最多 4 个。

非常感谢任何帮助!

Answer 1

这里是你的问题的解决方案:

$(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
        }
    })
})

http://jsfiddle.net/urqL1evn/21/

CSS 已更改(边距以 em > px 为单位)

.textbox {
    margin: 10px 20px;
    width: 80%;
    font-size: 100px;
    white-space: pre-wrap;
}

所以你需要将 .textbox font-size 设置为 100px 然后在 JS 中我们一直降低它直到.textbox 元素的高度不等于或低于其父元素。它非常简单，而且运行良好。

我希望这是您问题的答案。

不要忘记使用 jQuery 库。