动态调整文本大小以填充div [英] Dynamically resize text to fill div
问题描述
我一直在寻找一个解决方案来调整div中的文本大小，使文本填满整个div高度和宽度，没有效果。
我已经制作了一些图片来帮助理解这个问题：
所以这是一个高度和宽度设置的简单div。这个高度和宽度不变，在框中的文字！所以我想做的是让文本填充div的整个宽度和高度，就像下面的图片。
我一直在使用下面的简单示例，我根本找不到如何做到这一点。我已经尝试设置相对字体大小与百分比，做溢出的事情，
文本对齐所有不给我我想要的结果。
< 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>
这个问题甚至可以用简单的CSS解决，还是我要做一些javascript / jQuery？ p>
正如我所说的，这可能是
的一个欺骗。它不会t似乎是最新的虽然！
祝你好运！
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.
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.
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?
As I said this may be a dupe of
Auto-size dynamic text to fill fixed size container.
The OP did a jQuery plugin for that means, you can download it here
It doesn't seem to up to date though!
Good luck!
这篇关于动态调整文本大小以填充div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
