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

Question

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

• 包含两个容器(行)
  • 顶行是固定大小
  • 底部尺寸适合最大可用垂直空间
• 应该动态调整底部容器内的文本(字体大小)以适应容器高度.

第一个问题的答案很简单,但在这里添加它,因为不知道第二个问题不依赖于它.

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

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

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

编辑

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

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

Answer 1

基本上,你需要下一个:

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

所以,你应该检查问题

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

并且喜欢,例如:

• 有没有办法在div中检测到垂直溢出时触发事件？
• 检测是否有溢出没有javascript
• 如何检测div元素中的溢出？
• 检查HTML元素是否包含滚动条
• CSS - 如果内容溢出到新行,则应用另一种样式
• 确定HTML元素的内容是否溢出

也许还有很多人.

也许你没有搜索正确关键字的问题,但这可能是重复的.:)