javascript - 函数不会在加载时触发，但会在调整大小时起作用

Question

所以我正在研究一个调整字体大小的函数，这样文本就可以跨越多行尽可能多地填充容器而不会溢出。例如，

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

$(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>

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

编辑: 该函数确实会在文档准备就绪时触发，但它不会考虑父级的完全加载尺寸。相反，它将 parent 的高度测量为文本的高度。

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

这是 fiddle ..

Answer 1

您在 fiddle 中的函数实际上是第一次运行，如果您为 .textFill.. 指定字体大小，您可以看到它。比如 10px。您会发现即使在第一次调用时它也确实会放大到最大宽度。

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

但是这个问题之前已经解决了，因为我真的不值得为答案付出任何功劳，所以我会 link to it here .请务必查看该答案中包含的要点!