时间戳

首页 > 解决方案 > 通过增加字体填充剩余空间

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

问题描述

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

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 个。

非常感谢任何帮助！

标签： css

解决方案

这是您的问题的解决方案：

$(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 库。

推荐阅读