javascript 动态调整字体大小以适应容器大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17001302/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically resize font size to fit container size
提问by cajwine
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 dynamicallyresized 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?
请有人帮助我一些已经完成的 jquery 或任何其他 js/css 解决方案的指针吗？
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...
我不是网页设计师，只想制作一个简单的网页模板来适合我的文本 - 我知道一点 css - 但不是 javascript - 因此要求指向任何“准备运行”解决方案的指针，如果存在...
EDIT
编辑
Checking overflow solutions, this answer https://stackoverflow.com/a/7138971/869025works 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.
检查溢出解决方案，这个答案https://stackoverflow.com/a/7138971/869025可以很好地检测垂直溢出。现在的问题是，如何将上面的溢出javascript检查添加到循环中，什么会使我的字体变小。
For the better illustrating attaching two demo images...
为了更好地说明附加两个演示图像...
采纳答案by jm666
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
- Determine if an HTML element's content overflows
- 在 div 中检测到垂直溢出时，有没有办法触发事件？
- 在没有javascript的情况下检测是否有溢出
- 如何检测div元素中的溢出？
- 检查 HTML 元素是否有滚动条
- CSS - 如果内容溢出到新行，则应用另一种样式
- 确定 HTML 元素的内容是否溢出
maybe many others.
也许还有很多其他人。
Maybe you don't searched the questions for the right keyword, but this is probably an duplicate. :)
也许您没有搜索正确关键字的问题，但这可能是重复的。:)
回答by Omar
I think you could check this question: JavaScript Scale Text to Fit in Fixed Div
我想你可以检查这个问题：JavaScript Scale Text to Fit in Fixed Div
As I understand that's what you need.
据我了解，这就是您所需要的。
EDIT: I found something really interesting in Gist: https://gist.github.com/mekwall/1263939
编辑：我在 Gist 中发现了一些非常有趣的东西：https: //gist.github.com/mekwall/1263939
