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

Question

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

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

第一个问题的答案很简单，但是在这里添加它，因为不知道第二个问题不取决于它。

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

请有人帮我指点一下已经完成的 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