Question

我一直在寻找一个解决方案来调整div中的文本大小，使文本填写整个div的高度和宽度，但没有用。

我制作了一些图片来帮助您理解这个问题： Div 1

所以这是一个设置了高度和宽度的简单div。这个高度和宽度不会改变，框中的文字确实如此！所以我想要的是让文本填充div的整个宽度和高度，就像下面的图像一样。

Div 2

我一直在研究下面这个简单的例子，我根本找不到如何做到这一点。我试过用百分比设置相对字体大小，用溢出做事，文本对齐所有没有给我我想要的结果。

<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？

Answer 1

正如我所说，这可能是一个骗局

Auto-size dynamic text to fill fixed size container.

OP执行了jQuery plugin，这意味着您可以下载here

虽然它似乎不是最新的！

祝你好运！

Answer 2

您可以使用 FitText.js （github page）来解决此问题。与TextFill相比，它真的很小而且效率很高。 TextFill使用昂贵的while循环而FitText则不使用。

FitText也更灵活（我在具有非常特殊要求的proyect中使用它并且像冠军一样工作！）。

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>

您还可以为其设置选项：

<script>
  jQuery("#responsive_headline").fitText(1, { minFontSize: '30px', maxFontSize: '90px'});
</script>

CSS：

#responsive_headline {
   width: 100%;
   display: block;
}

如果您需要，FitText也有no-jQuery version。

Answer 3

我的猜测是，这不是你可以用CSS做的事情。字体中没有任何百分比概念（据我所知）。您可能需要使用Javascript。

动态调整文本大小以填充div

3 个答案: