4

可能重复：
自动调整大小的动态文本以填充固定大小的容器

如果容器仅包含没有子元素的纯文本，则以下代码是可行的解决方案：

(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);

在此处查看演示。

但是，如果容器包含孩子，我们说：

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

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

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

4

1 回答 1

4

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

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

这是工作演示

更新

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

于 2012-10-10T16:43:48.587 回答