Question

我想动态调整按钮的字体大小，以便在按钮中插入文本时，它会自动调整以显示完整的文本。文字的大小可能会有所不同。它可以是5或30个单词。有没有人以前遇到过这个并知道如何解决这个问题？

Answer 1

您可能对jQuery插件BigText感兴趣，它会将字体大小与特定宽度匹配。

不幸的是，没有纯CSS解决方案。您最好的选择是使用“视口宽度”单位进行字体大小调整：

    font-size: 5vw;

这会相对于视口宽度调整字体大小。

Answer 2

现在用循环解决它并且效果很好。如果你有一个更高效的解决方案，我想听听它。

Fiddle Link

function sizeButtonTextLabel(id){

$("label[for='" + id + "'] div").css('font-size', "1ems"); 

while( $("label[for='" + id + "'] div").height() > $("label[for='" + id + "']").height() ) {
        $("label[for='" + id + "'] div").css('font-size', parseInt($("label[for='" + id + "'] div").css('font-size'))- 0.5 +"px");
    }
}

//initial sizing
sizeButtonTextLabel('checkbox-h-1a');
sizeButtonTextLabel('checkbox-h-1b');
sizeButtonTextLabel('checkbox-h-2a');
sizeButtonTextLabel('checkbox-h-2b');

//sizing when changing window height/width
$(window).resize(function() {   
sizeButtonTextLabel('checkbox-h-1a');
sizeButtonTextLabel('checkbox-h-1b');
sizeButtonTextLabel('checkbox-h-2a');
sizeButtonTextLabel('checkbox-h-2b');
});

将字体大小调整为容器大小（标注宽度和高度）

2 个答案: