Question

可能重复：
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 或其他参数。

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

Answer 1

我玩了一下，在我看来，我找到了解决方案。该算法按以下方式修改：

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

这是工作DEMO

<强>更新

here是您需要的解决方案，前一个解决方案比您需要的更多，我只想保留它，也许其他人会发现它有用。我还要注意第二个解决方案与第一个解决方案非常相似，除了系数部分，这种情况是不必要的。

Answer 2

您是否查看了FitText jQuery插件？

http://fittextjs.com/

太好了。

计算文本字体大小以使用文本填充容器

2 个答案: