Javascript 动态调整字体大小以适应容器大小

Javascript 动态调整字体大小以适应容器大小,javascript,html,css,Javascript,Html,Css,需要制作具有以下功能的模板: 包含两个容器(行) 第一行是固定大小的 底部将自身调整为最大可用垂直空间 底部容器内的文本(字体大小)应动态调整大小以适应容器高度 第一个问题的答案很简单,但在这里加上它,因为第二个问题并不取决于它 这里已经有很多问题询问如何动态调整文本区域或输入字段中的文本大小。但这个问题更为特殊,因为可能需要计算单词或其他一些内容来适应容器的大小 请有人帮我指点一下已经完成的jquery或任何其他js/css解决方案好吗 我不是一个网页设计师,我只想制作一个简单的网页模

需要制作具有以下功能的模板:

  • 包含两个容器(行)
    • 第一行是固定大小的
    • 底部将自身调整为最大可用垂直空间
  • 底部容器内的文本(字体大小)应动态调整大小以适应容器高度
第一个问题的答案很简单,但在这里加上它,因为第二个问题并不取决于它

这里已经有很多问题询问如何动态调整文本区域或输入字段中的文本大小。但这个问题更为特殊,因为可能需要计算单词或其他一些内容来适应容器的大小

请有人帮我指点一下已经完成的jquery或任何其他js/css解决方案好吗

我不是一个网页设计师,我只想制作一个简单的网页模板来适应我的文本-我知道一点css-但不是javascript-因此要求指向任何“准备运行”解决方案的指针,如果存在的话

编辑 通过检查溢出解决方案,这个答案可以很好地检测垂直溢出。现在的问题是,如何将上面的溢出javascript检查添加到循环中,什么会将我的字体更改为更小

为了更好地演示附加两个演示图像。。。

我想你可以检查一下这个问题:

据我所知,这正是你所需要的


编辑:我在要点中发现了一些非常有趣的东西:

基本上,你需要下一个:

while( is_overflow_in_the_second_div() ) {
    set_smaller_font();
}
所以,你应该和我一起检查问题

  • 如何检测阴囊
  • 如何检测溢出
例如:

也许还有很多


可能您没有在问题中搜索正确的关键字,但这可能是重复的。:)

第一个链接是“水平调整大小”,所以调整字体大小,使其适合一行的场景。我需要调整文本大小以垂直适应项目符号列表:(-我不确定是否可能…;)要检查第二个链接。是的,但是如果文本运行宽度再次减小,如何设置它P