Javascript 调整元素大小以适合容器

我有一个

ul

，里面有一些

li

元素。 如何防止内部的元素在不溢出容器的情况下断开它们的线

我想我需要调整

li

元素上的

font size

和

margin

。
但我不知道怎么做。 你知道解决这个问题的方法是什么吗

记住这是一份菜单

---

示例：

我不知道我是否正确理解了您的问题，这是否会有所帮助
但使用此代码时，如果增加列表中的元素数，则字体大小将减小以适合容器。
当然，这段代码应该改进，但它只是给您一个想法

$（文档）.ready（函数（）{
功能减少（）{
变量计数=0
函数递归器（计数）{
var containerW=$（'.container'）.width（）
var liW=$（'.container li'）.width（）
控制台日志（liW）
var numberlinks=$（'.container li'）.length
var总计=liW*nuberLinks
如果（总数>=集装箱）{
$（'container ul'）.css（{'font-size'：20 count+'px'}）
计数++
递归器（计数）
}
};
递归器（0）；
};
减少（）；
})

---

如果此解决方案不适合您的需要，我很抱歉让您浪费时间。

为什么您不能让它适合您？该菜单是动态生成的吗？它是动态生成的。您希望如何处理长项目名称？动态更改字体大小？边距和字体大小的组合。这肯定是我可以处理的。非常感谢。

<script type="text/javascript">
$(document).ready(function(){
    function decrease () {
        var count=0
        function recursor(count){
                var containerW=$('.container').width()
                var liW=$('.container li').width()
                console.log(liW)
                var nuberLinks=$('.container li').length
                var total=liW*nuberLinks
                if(total>=containerW){
                   $('.container ul').css({'font-size':20-count+'px'})
                    count++
                    recursor(count)
                }
        };
        recursor(0);
    };
    decrease();
})
</script>