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

私は少し遊んだことがありますが、解決策を見つけたようです。アルゴリズムは次のように変更されます。

  • 最初に、ターゲット要素とそのすべての子（最初のレイヤーだけでなく）の古いフォントサイズを見つける必要があります
  • 次に、係数を計算する必要があります。つまり、フォントサイズをどの程度変更する必要があるか、係数の計算は新しいフォントサイズの計算と並行して実行する必要があります。
  • その係数をターゲットの最終的なフォントサイズとそのすべての子に適用します

これが動作中のデモです

アップデート

これがあなたが必要とする解決策です、前のものはあなたが必要とするより少し多くをします、私はそれを維持したいだけです、多分他の人はそれが役に立つと思うでしょう。また、この2番目のソリューションは、係数部分を除いて最初のソリューションと非常に似ていることに注意してください。この場合は不要です。

于 2012-10-10T16:43:48.587 に答える