Javascript 动态调整文本大小以填充 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4371003/
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 text to fill div
提问by Cheesebaron
I have been searching for a solution to resize the text size in a div to make the text fill out the entire div height and width, with no avail.
我一直在寻找一种解决方案来调整 div 中的文本大小，以使文本填充整个 div 的高度和宽度，但无济于事。
I have made some images to help understand this problem:
我制作了一些图像来帮助理解这个问题：
So this is a simple div with a height and width set. This height and width does not change, the text in the box does! So what I want to do is to make that text fill the whole width and height of the div just like in the image below.
所以这是一个设置了高度和宽度的简单 div。这个高度和宽度不会改变，框中的文本会改变！所以我想要做的是让文本填充 div 的整个宽度和高度，就像下图一样。
I have been working on the simple example below and I simply cannot find out how to do this. I have tried setting relative font-sizes with percentage, doing things with overflow, text-aligning all not giving me the result I want.
我一直在研究下面的简单示例，但我根本不知道如何做到这一点。我试过用百分比设置相对字体大小，用溢出做事，文本对齐都没有给我想要的结果。
<html>
<head>
<title>Test</title>
<style type="text/css">
#box1, #box2{
width: 400px;
height: 300px;
color: white;
margin: 10;
font-size:larger;
text-align:justify;
letter-spacing: 100%;
}
#box1 { background-color: green;}
#box2 { background-color: blue;}
</style>
</head>
<body>
<div id="box1">
Llorem ipsum foo bar baz
</div>
<div id="box2">
Foobar
</div>
</body>
</html>
Is this problem even solvable with simple CSS or will I have to do some javascript/jQuery?
这个问题甚至可以用简单的 CSS 解决还是我必须做一些 javascript/jQuery？
采纳答案by Trufa
As I said this may be a dupe of
正如我所说，这可能是一个骗局
Auto-size dynamic text to fill fixed size container.
The OP did a jQuery pluginfor that means, you can download it here
It doesn't seem to up to date though!
不过好像不是最新的！
Good luck!
祝你好运！
回答by eduludi
You can use FitText.js(github page) to solve this problem. Is really small and efficient compared to TextFill. TextFill uses an expensive while loop and FitText don't.
你可以使用FitText.js( github page) 来解决这个问题。与 TextFill 相比，它确实小巧高效。TextFill 使用昂贵的 while 循环，而 FitText 不使用。
Also FitText is more flexible (I use it in a proyect with very special requirements and works like a champ!).
此外，FitText 更灵活（我在一个具有非常特殊要求的项目中使用它，并且像冠军一样工作！）。
HTML:
HTML：
<div class="container">
<h1 id="responsive_headline">Your fancy title</h1>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
jQuery("#responsive_headline").fitText();
</script>
You also can set options to it:
您还可以为其设置选项：
<script>
jQuery("#responsive_headline").fitText(1, { minFontSize: '30px', maxFontSize: '90px'});
</script>
CSS:
CSS：
#responsive_headline {
width: 100%;
display: block;
}
And if you need it, FitText also has a no-jQuery version.
如果您需要，FitText 还有一个非 jQuery 版本。
回答by warriorpostman
My guess is, this is not the kind of thing you can do with CSS. There isn't any kind of notion of percentage in fonts (as far as I know). You'll probably need to use Javascript.
我的猜测是，这不是你可以用 CSS 做的事情。字体中没有任何百分比的概念（据我所知）。您可能需要使用 Javascript。
