动态调整文本大小以填充 div [重复]答案

【问题标题】：Dynamically resize text to fill div [duplicate]动态调整文本大小以填充 div [重复]
【发布时间】：2011-05-21 05:42:03
【问题描述】：

我一直在寻找一种解决方案来调整 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？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

Auto-size dynamic text to fill fixed size container.

OP为此做了一个jQuery plugin，你可以下载它here

不过好像不是最新的！

祝你好运！

【讨论】：

是的，这似乎是问题的解决方案，似乎至少适用于 Chrome，还需要在其他浏览器中进行测试。
祝你好运，我也是 chrome，所以无法帮助你。如果您在实施时遇到任何问题，请告诉我！
链接已损坏。请直接粘贴代码
工作链接并在此处回答stackoverflow.com/a/67465220/12910765

【解决方案2】：

您可以使用 FitText.js (github page) 来解决此问题。与 TextFill 相比，它确实小而高效。 TextFill 使用昂贵的 while 循环，而 FitText 不使用。

FitText 也更灵活（我在一个有非常特殊要求的项目中使用它，并且工作起来就像一个冠军！）。

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。

【讨论】：

这不是请求者所要求的。 FitText 只允许基于比率的调整大小；请求者要求调整文本大小以使其完全填充 div（如，如果没有字符挂在 div 之外，您无法再增加 font-size: ）。

【解决方案3】：

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

【讨论】：

字体百分比是可能的。 100% 将是您的浏览器设置中定义的大小，超过或低于 100% 的所有内容都将根据该字体大小调整大小。