Question

所以我正在开发一个调整字体大小的函数，以便文本尽可能多地填充容器，而不会溢出多行。例如，

我希望文本尽可能多地覆盖div中1200px的区域，而不会溢出。此脚本在调整大小上执行此操作，但未在加载时执行此操作。

$(document).ready(textFill);
$(window).resize(textFill);

function textFill() {
  $(".textFill").each(function() {
    var
      $text = $(this),
      $parent = $text.parent();

    var
      textW = $text.width(),
      textH = $text.height(),
      parentW = $parent.width(),
      parentH = $parent.height(),
      ratio = (parentW + parentH) / (textW + textH);

    var
      originalSize = parseFloat($text.css('font-size')),
      newSize = originalSize * (.9 * ratio);

    $text.css("font-size", newSize);

  });
}

#container {
  width: 400px;
  height: 300px;
  border: 1px solid blue;
}
.textFill {
  display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <h1 class="textFill">Make this fit as large as possible.</h1>
</div>

当我调整大小时，它会填充容器，但是上载它似乎不会触发。

编辑：该功能会在文档准备就绪时启动，但它不会考虑父级的完全加载维度。相反，它测量父母身高作为文本的高度。

此外，我不确定resize事件是否是我想要使用的事件，因为它应该只调整字体大小，也许我应该仅在更改父级维度时执行，这可能吗？

这是fiddle ..

Answer 1

您在小提琴中的功能实际上是第一次运行，如果您为.textFill指定字体大小，则可以看到...比如10px。您会看到即使在第一次通话时它也会扩展到最大宽度。

主要问题是您在每次调整大小事件时重新读取字体大小（originalSize）（每次调用该函数时），然后使用新大小再次计算。只有达到最大值后，才能得到预期的结果。

然而问题已经解决过了，因为我真的不值得回答，我只会link to it here。请务必查看该答案中包含的要点！

Answer 2

这是因为

textH = $text.height()

每次调整大小时返回一个不同的值，文本的高度不断增加，使newSize的值更大。这就是为什么如果你更多次调用这个函数：

     textFill();
     textFill();
     textFill();
     textFill();
     textFill();

它会使文字更大。解决方案是用css控制高度。

Answer 3

“textFill”函数确实触发了document.ready事件。您可以通过添加一些CSS样式来证明这一点，以使其可见，例如

$text.css({"font-size", newSize, "color": "red"});

我确实对计算“比率”的方式感到困惑。如果你只是想让“h1”字体足够大以填充外部容器，唯一要考虑的是保持足够的垂直空间以避免“h1”重叠出“div”框。所以这个比例可能是这样的：

var ratio = parentH / textH;

“newSize”计算中还有一个幻数“0.9”。我不得不说我不知道它是怎么出来的:)。

Answer 4

只是一些想法和计划：

首先，您正在修复容器的宽度。因此，重新调整窗口大小没有任何作用。如果您的容器可能会改变大小，您可能需要重新调整大小，并且有很多关于如何执行此操作的示例。但是，现在，您可以删除resize（）行。它只是增加了混乱。

其次，由于你是自动换行，所以计算并不容易。一个字可以确定字体大小（因此它不会变得比容器宽度大）。您可以通过将字体大小设置为容器高度并找出最长的单词来计算出来，而不是从中计算最大字体大小。另一种可能性是字体大小将限制为文本包含的许多行。您可以通过查看行间距以及文本在1px字体大小的宽度来提出初步猜测，但最终您将不得不尝试使用一些字体大小来查看文本实际包含的行数。出于这个原因，我建议写一个循环。

您不希望试验可见，因此您必须学习使其不可见或将其移出屏幕，使得大小仍由浏览器计算，但文档或文档中没有任何更改滚动条。

第三，我会从字体大小的最小和最大猜测开始（1个像素和容器的高度），然后我会在中间选择一个值，尝试一下，看看它是否适合容器（是否宽度和高度，如果是，则将其设为最小值，如果不是，则将其设为最大值（如果结果相等，则表示已完成）。我会继续这样做，直到最大值和最小值在彼此的一个小值（例如，1％）之内，然后我会选择最小值并完成它。我也会对它进行最大数量的猜测（例如，25），如果我没有得到答案，我也会选择min并完成它（浏览器可能并不总是表现一致，所以这是一个＆＃34;以防万一＆＃34;某种情况。）

代码：

 textFill();

 function textFill() {
     $(".textFill").each(function () {
         var
         $text = $(this),
             $parent = $text.parent();

         var
         parentW = $parent.width(),
             parentH = $parent.height();

         var minFontSize = 1;
         var maxFontSize = parentH;

         for (loop = 0; loop < 25; ++loop) {
             var newFontSize = (minFontSize + maxFontSize) / 2;
             $text.css("font-size", newFontSize);
             var textW = $text.width();
             var textH = $text.height();

             if (textW > parentW || textH > parentH) {
                 maxFontSize = newFontSize;
             } else {
                 minFontSize = newFontSize;
             }

             if ((maxFontSize - minFontSize) * 100 < minFontSize) break;
         }

         $text.css("font-size", minFontSize);
     });
 }

小提琴： http://jsfiddle.net/tncmrya6/

Answer 5

您只在窗口调整大小事件上调用textFill（）函数。

如果你想在加载时调用这个函数，你可以实现如下。

$(window).load(function() {

  textFill()

});

在两个事件上调用您的函数加载和调整事件大小。你可以使用下面的代码片段。

$(window).on("load resize",function(){

  textFill()

})

Answer 6

如果我理解得很清楚，那么您需要根据宽度和高度来调整文本。也许你应该从计算中删除.9。检查this以查看这是否是您搜索的内容。

$(document).ready(textFill);
$(window).resize(textFill);

function textFill() {
$(".textFill").each(function() {
var
  $text = $(this),
  $parent = $text.parent();

var
  textW = $text.width(),
  textH = $text.height(),
  parentW = $parent.width(),
  parentH = $parent.height(),
  ratio = (parentW + parentH) / (textW + textH);
  console.log(ratio);

var
  originalSize = parseFloat($text.css('font-size')),
  newSize = originalSize * ratio;//HERE'S BIG CHANGE :)

$text.css("font-size", newSize);

});
}

Answer 7

使用

window.onload = function() {
    textFill();
}

你真的不需要专门使用jQuery来处理窗口本身处理的内容。

Answer 8

如果您希望脚本执行onload，则可以执行此操作。每次都有效。

<script type='text/javascript'>
window.addEventListener('DOMContentLoaded', function () { 
    textFill(); //Call your function here
});

</script>

函数不会在加载时触发，但可以调整大小

8 个答案: