根据容器宽度和高度设置字体大小

Question

我正在尝试编写一个脚本，以便根据容器的宽度，高度和文本长度设置font-size。

这就是我到目前为止所做的。

    window.onload = function () {
    var defaultDimensions = 300;
    var boxWidth = window.innerWidth / Math.floor(window.innerWidth / defaultDimensions);
    var boxes = document.getElementsByClassName('feed');
    for (var i = 0; i < boxes.length; i++) {
        boxes[i].style.width = boxWidth + 'px';
        boxes[i].style.height = boxWidth + 'px';
    }
};
var getFontSizeStatus = function (text) {
    var chars = 250; // Maximum Characters
    var height = 300; // Default Height
    if (text.length < chars) {
        chars = text.length;
    }
    if ((window.innerWidth / Math.floor(window.innerWidth / height)) < height) {
        height = window.innerWidth / Math.floor(window.innerWidth / height);
    }
    height = (height / 10) * 8; // .feed-text height is 80% of .feed's height

    var size = height / chars;
    return size + 'em';
}

以下是完整的代码fiddle.

当前代码正常工作，但容器的高度，宽度和文本长度比的字体大小需要修复。

Answer 1

我会尝试使用像fitText这样的jQuery插件

http://fittextjs.com/