我如何通过使用jQuery调整div的大小来调整div的字体大小？

Question

您好，每个人都可以帮助我吗？ 通过使用此代码，我的字体大小变为父div的大小

这里

$(divid).resizable({
            maxHeight: parseInt(200),
            maxWidth: parseInt(180),
            resize: function(event, ui) {

                var width1 = parseInt(ui.element.css('width'));
                var height1 = parseInt(ui.element.css('height'));

                ui.element.css({'font-size': width1+'px'});
                ui.element.css({'line-height': height1+'px'});
            }
});

其中“ divid”是父div，其中子div存在以触发字体大小调整事件，但是我不希望字体大小超出父div，文本也不会隐藏。

你能帮我吗？

Answer 1

只需尝试将width1和height1除以10 。 当然，您可以尝试更复杂的方法，但这似乎效果很好。 我在这里打了一个小演示。

$(divid).resizable({
    maxHeight: parseInt(200),
    maxWidth: parseInt(180),
    resize: function(evt, ui) {        
        var width1 = parseInt(ui.element.css('width')),
            height1 = parseInt(ui.element.css('height'));
        ui.element.css({
            'font-size': (width1/10)+'px',
            'line-height': (height1/10)+'px'
        });
    }
});

（还要注意，您可以通过传递一个对象来将ui.element.css调用合并为一个调用。）