计算文本字体大小以用文本填充容器[重复]答案

【问题标题】：Calculate text font size to fill container with text [duplicate]计算文本字体大小以用文本填充容器[重复]
【发布时间】：2012-10-01 00:31:12
【问题描述】：

可能重复：
Auto-size dynamic text to fill fixed size container

如果容器只包含一个没有子元素的纯文本，那么下面的代码是一个可行的解决方案：

(function($) { 
  $.fn.textfill = function(options) { 
    return this.each(function() {
      var text = $(this).text();
      $(this).text('');
      var container = $('<span />').text(text).appendTo($(this));
      var min = 1, max = 200, fontSize;
      do {
        fontSize = (max + min) / 2;
        container.css('fontSize', fontSize);
        var multiplier = $(this).height()/container.height();
        if (multiplier == 1) { min = max = fontSize}
        if (multiplier >  1) { min = fontSize}
        if (multiplier <  1) { max = fontSize}
      } while ((max - min) > 1);
      fontSize = min;
      if ($(this).width() < container.width()) {
        min = 1;
        do {
          fontSize = (max + min) / 2;
          container.css('fontSize', fontSize);
          var multiplier = $(this).width()/container.width();
          if (multiplier == 1) { min = max = fontSize}
          if (multiplier >  1) { min = fontSize}
          if (multiplier <  1) { max = fontSize}
        } while ((max - min) > 1);
        fontSize = min;
      }
      container.remove();
      $(this).text(text);
      var minFontSize = options.minFontPixels;
      var maxFontSize = options.maxFontPixels;
      $(this).css('fontSize', 
                  minFontSize && (minFontSize > fontSize) ?
                  minFontSize :
                  maxFontSize && (maxFontSize < fontSize) ?
                  maxFontSize :
                  fontSize); 
    }); 
  }; 
})(jQuery);

查看演示here。

但是如果容器中包含子元素呢：

<div><span class="c1">text1</span>main text<span class="c2">text2</span></div>

我们还想自动调整孩子的大小，让文本与作为文本节点的“主文本”保持相同的高度？儿童可能有不同的 font-family 或其他参数。

如何改进上述算法以获得这样的结果？

【问题讨论】：

@Diodeus - 不是重复的！阅读关于子元素的帖子和通知差异。

标签： javascript jquery

【解决方案1】：

我玩了一点，在我看来我找到了解决方案。算法修改如下：

首先，您需要找到目标元素及其所有子元素（不仅是第一层）的旧字体大小
那么你需要计算一个系数，即字体大小应该改变多少，系数的计算应该与新的字体大小计算并行进行
并将该系数应用于目标及其所有子项的最终字体大小

这是工作的DEMO

更新

here是你需要的解决方案，上一个比你需要的多一点，我只是想保留它，也许其他人会觉得它有帮助。我还想注意第二个解决方案与第一个解决方案非常相似，除了系数部分，在这种情况下这是不必要的。

【讨论】：