Javascript 根据容器中展开组件的数量自动调整可折叠树中文本的大小

嘿，我正在编写一个代码，使用复选框创建一个可扩展/可折叠的树。我已经记下了这一部分，但我想让它成为这样，你越是扩展树，文本就越小，这样用户就不需要滚动查看所有扩展的分支。 我遇到了jQuery插件TextFill，但无法让它按照我希望的方式工作（甚至不确定它是否与我正在做的事情兼容）

下面是一段代码

/*更好的树视图*/
html，正文{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
字体大小：40px；
线高：50px；
}
/*王国*/
王国，身体，王国{
颜色：#0000ff；
}
王国：悬停，身体。王国：悬停{
背景色：#0000ff；
}
li.kingdom+输入[type=checkbox]+ul>li{
显示：无；
}
li.kingdom+input[type=checkbox]：选中+ul>li{
显示：块；
}
/*门*/
门，体，门{
颜色：#ff0000；
}
门：悬停，身体。门：悬停{
背景色：#ff0000；
}
类，body.class{
颜色：#008000；
}
class:hover，body.class:hover{
背景色：#008000；
}
html.order，body.order{
颜色：#800080；
}
order:hover，body.order:hover{
背景色：#800080；
}
html.family，body.family{
颜色：#ffa500；
}
family:hover，body.family:hover{
背景色：#ffa500；
}
属，体，属{
颜色：#ffc0cb；
}
属：悬停，身体。属：悬停{
背景色：#ffc0cb；
}
亚属，体亚属{
颜色：#a52a2a；
}
亚属：悬停，身体。亚属：悬停{
背景色：#a52a2a；
}
种类，身体，种类{
颜色：#000000；
}
种类：悬停，身体。种类：悬停{
背景色：#000000；
}
亚种，身体，亚种{
颜色：#808080；
}
亚种：悬停，身体。亚种：悬停{
背景色：#808080；
}
treeview先生{
浮动：左；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
-o-用户选择：无；
用户选择：无；
}
.treeview:悬停输入~标签：之前，.treeview.hover输入~标签：之前{
不透明度：1.0；
-webkit转换持续时间：0.5s；
-moz转换持续时间：0.5s；
-ms过渡时间：0.5s；
-o-过渡持续时间：0.5s；
过渡时间：0.5s；
}
treeview先生{
-webkit转换持续时间：1s；
-moz转换持续时间：1s；
-ms转换持续时间：1s；
-o-过渡持续时间：1s；
过渡时间：1s；
列表样式：无；
左：1米；
}
崔维尤·乌尔·李·斯潘先生{
-webkit转换属性：颜色；
-moz过渡特性：颜色；
-ms过渡性质：颜色；
-o-过渡性质：颜色；
过渡性质：颜色；
-webkit转换持续时间：1s；
-moz转换持续时间：1s；
-ms转换持续时间：1s；
-o-过渡持续时间：1s；
过渡时间：1s；
}
.treeview ul li span:悬停{
颜色：白色；
-webkit转换持续时间：0.3s；
-moz转换持续时间：0.3s；
-ms转换持续时间：0.3s；
-o-过渡持续时间：0.3s；
过渡时间：0.3s；
}
.treeview输入{
显示：无；
/*箭的东西*/
}
.treeview输入~标签{
光标：指针；
}
.treeview输入~标签：之前{
内容：''；
宽度：0；
身高：0；
位置：绝对位置；
左边距：-1米；
边缘顶部：0.4em；
边框宽度：5px；
边框样式：实心；
边框顶部颜色：黑色；
右边框颜色：黑色；
边框底色：透明；
左边框颜色：透明；
不透明度：0.0；
-webkit转换属性：不透明度；
-moz过渡特性：不透明度；
-ms过渡特性：不透明度；
-o-过渡性质：不透明度；
过渡特性：不透明度；
-webkit转换持续时间：1s；
-moz转换持续时间：1s；
-ms转换持续时间：1s；
-o-过渡持续时间：1s；
过渡时间：1s；
}
.treeview输入：选中~标签：之前{
左边距：-0.8em；
边框宽度：5px；
边框顶色：透明；
右边框颜色：黑色；
边框底色：黑色；
左边框颜色：透明；
}
输入+标签+ul{
显示：无；
}
输入：选中+标签+ul{
显示：块；
}

动物


脊索动物

哺乳动物

食肉动物

鸟蝇科

犬科动物

卢皮斯犬







啮齿动物

蛇科

斯库里斯

斯库里斯


$("label").click(function (element) {
    var depth = $(this).parents().length;
    // Font size of 8 will be the minimum:
    var fontSize = Math.max(40 - depth * 2, 8);
    $(".treeview.hover li").css({
        "font-size": fontSize
    });
});