javascript - 自动调整字体大小以适应固定形状的 div

Question

这是我正在使用的小提琴：

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 中所示的问题。有人可以帮我解决这个问题吗？

Answer 1

尝试一个 jquery 插件FITTEXT这将帮助你

Answer 2

你必须使用javascript。CSS 本身无法处理这个问题。

举个糟糕的例子：

$(".font700").each(function(i, obj) {
    newSize = $(obj).text().length;
    newSize = 64 - newSize;
    newSize = (newSize < 10) ? 10 : newSize;
    $(obj).css("font-size", newSize + "px");
});

JSFiddle

顺便说一句，会有比这更好的解决方案。这只是表明使用 javascript（特别是 jQuery）是可能的。您可能会找到一些插件，例如FitText可以为您解决很多这些问题。

_{（感谢 Grim 的链接）}

Answer 3

对于那些不喜欢 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);
});

这会在砌体式网格中调整我的字体大小