4

これが私が取り組んでいるフィドルです:

http://jsfiddle.net/LbUFg/

html コードは次のとおりです。

<div class="body"> 
  <div class="variation1 font700 green1"> 
    <h2> 
      sample <span class="divider"> arrowshape </span>
    </h2>
  </div>
  <div class="clear"></div>
  <div class="variation2 font700 green2">
    <h2>
      as the  text increases the font size must decrease but the block height must remain same <span class="divider"> as the  text increases the font size must decrease but the block height must remain same </span>
    </h2> 
  </div>
  <div class="clear"></div>

  <!-- OTHER HTML -->

</div>

表示されている矢印ブロックの寸法(サイズ)を変更せずにdivに収まるようにテキストを調整したい(テキストサイズは変更できますが、ブロックサイズは変更できません)。矢印ブロックはサンプル矢印のように見える必要があり、バリエーション 2 に示すように問題に直面しています。誰かがこれで私を助けてもらえますか??

4

3 に答える 3

0

FitText のようなプラグインが嫌いな人のために、現在の平均文字幅を見て、含まれる要素に収まるようにフォント サイズを計算してみました (複雑さ:複数行、一時的に css-width を変更することで陽気に解決されました)。 ) HTML は

<div><h1><a><span>Title</span></a></h1></div>

そしてjQuery:

$("h1").each(function() {
    var l = $(this).text().length;
    var w = $(this).prop("offsetWidth");  //clientWidth doesn't always work
    var old_pos = $(this).find("a").css("position");
    var old_w = $(this).find("a").css("width");
    $(this).find("a").css("position", "absolute");
    $(this).find("a").css("width", "1000px");
    var w2 = $(this).find("span").prop("offsetWidth");
    var h2 = $(this).find("span").prop("offsetHeight");
    var c = 1.2*(w2/h2)/l;  // Current proportion of font width, 1.2 is constant
    var fontsize = w/l/c;
    fontsize = (fontsize<10)?10:fontsize;       //limit min
    //$(this).append(" "+c+"/"+fontsize);  //test
    //Set font size to fill width of parent element
    $(this).css("font-size",fontsize+"px");
    $(this).find("a").css("position", old_pos);
    $(this).find("a").css("width", old_w);
});

これにより、石積みスタイルのグリッドでフォントのサイズが変更されます

于 2014-11-07T22:30:12.510 に答える