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

Question

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

• 包含两个容器（行）
  • 顶行是固定大小
  • 底部将自身调整为最大可用垂直空间
• 底部容器内的文字（字体大小）应动态调整大小以适应容器高度。

第一个问题的答案很简单，但在此处添加，因为不知道第二个问题不依赖于它。

以下是有关如何动态调整textarea或输入字段中文本大小的问题。但这个问题更为特殊，因为可能需要计算单词或其他一些以适应容器大小。

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

我不是网页设计师，只想制作一个简单的网页模板，用于调整我的文本 - 我知道一点点css - 但不是javascript - 因此要求指向任何“准备好”运行“解决方案，如果存在......

修改

检查溢出解决方案，这个答案https://stackoverflow.com/a/7138971/869025可以很好地检测垂直溢出。现在的问题是，如何将上面的溢出javascript检查添加到循环中，什么会将我的字体更改为更小。

为了更好地说明附加两个演示图像......

Answer 1

基本上，你需要下一个：

while( is_overflow_in_the_second_div() ) {
    set_smaller_font();
}

所以，你应该用

检查问题

• 如何检测滚动条
• 如何检测溢出

并且喜欢，例如：

• is there a way to fire a event when vertical overflow is detected in a div?
• Detecting whether there's overflow or not WITHOUT javascript
• How to detect overflow in div element?
• Check whether HTML element has scrollbars
• CSS - Apply Another Style if Content Overflows to New Line
• Determine if an HTML element's content overflows

也许还有很多其他人。

也许您没有搜索正确关键字的问题，但这可能是重复的。 ：）

Answer 2

我想你可以查看这个问题：JavaScript Scale Text to Fit in Fixed Div

据我了解，这就是你所需要的。

编辑：我在Gist中找到了一些非常有趣的东西：https://gist.github.com/mekwall/1263939