动态调整字体大小以适应容器大小 [英] Dynamically resize font size to fit container size

问题描述

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

• 包含两个容器（行）
  
  
  
  
  • 顶行为固定大小
  
  
  • 底部尺寸本身到最大可用垂直空间
  
  


• 底部容器内的文字（字体大小）应动态调整大小以适应容器高度。

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

这里已经有很多问题，什么问怎么动态调整textarea或输入字段中的文本的大小。但是这个问题比较特别，因为可能需要计数字或其他一些适合容器大小。

可以请人帮我一些指针已经完成的jquery或任何其他的js / css解决方案？

我不是一个网页设计师，只想做一个简单的网页模板，什么将适合我的文字 - 我知道一点css - 但不是javascript - 因此要求指针指向任何即可运行解决方案，如果存在...

EDIT

检查溢出解决方案，此答案

如何检测div元素中的溢出？

检查HTML元素是否有滚动条

CSS - 如果内容溢出到新行，则应用另一种样式

如何在HTML元素溢出内容时使用JavaScript

也许你不会， t搜索了正确关键字的问题，但这可能是重复的。 ：）

Need make an template with the following features:

• containing two containers (rows)
  • the top row is fixed size
  • the bottom sizes itself to maximum available vertical space
• the text (font size) inside the bottom container should be dynamically resized to fit the container height.

The answer to 1st question is simple, but adding it here, because don't know than the second question is not depending on it.

Here are already many questions what asking how to dynamically resize the text in the textarea or input fields. But this question is more special, because probably need counting words or somewhat other to fit the container size.

Can please someone help me with some pointers to already done jquery or any other js/css solution?

I'm not a web designer and want make only one simple web page template what will use to fit my texts - i know a little bit css - but not javascript - therefore asking to the pointer to any "ready-to-run" solution, if exists...

EDIT

Checking overflow solutions, this answer http://stackoverflow.com/a/7138971/869025 works nicely to detect vertical overflow. Now the questions is, how to add the above overflow javascript check to the cycle, what will change my font to smaller.

For the better illustrating attaching two demo images...

解决方案

Basically, you need the next:

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

So, you should check questions with

• how to detect scrolbars
• how to detect overflow

and like, e.g.:

• 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
• How to determine using JavaScript if HTML element has overflowing content

maybe many others.

Maybe you don't searched the questions for the right keyword, but this is probably an duplicate. :)

这篇关于动态调整字体大小以适应容器大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！