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

Here is the fiddle im working with:

这是我的小提琴:

The html code is:

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>

I want to adjust the text such that it fits in the div without changing the dimensions(size) of the arrow block shown(Text size can change but not the block size). The arrow block must look like the sample arrow and Im facing the issue as shown in variation2. Can someone please help me out with this??

我想要调整文本，使它适合于div，而不需要更改箭头块的尺寸(大小)(文本大小可以更改，但不能更改块大小)。箭头块必须看起来像示例箭头，而我正面对如变量2所示的问题。有人能帮我一下吗?

3 个解决方案

#1

try a jquery plugin FITTEXT this will help you

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

#2

You'll have to use javascript. CSS itself can't handle this.

你必须使用javascript。CSS本身不能处理这个。

For a poor example:

对于一个贫穷的示例:

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

JSFiddle

There will be better solutions than this, by the way. This just demonstrates that it is possible using javascript (jQuery, specifically). You can probably find some plugins such as FitText that can solve a lot of these issues for you.

顺便说一下，还有更好的解决方案。这只是演示了使用javascript(特别是jQuery)是可能的。您可能会发现一些插件，比如FitText，可以为您解决很多这些问题。

_{(Thanks to Grim for the link)}

(感谢格林的链接)

#3

For those who don't like plugins like FitText, I just played around and calculate the font size to fit in the containing element by looking at the current average letter width (complication:multiple lines, solved here hilariously by temporarily changing the css-width) HTML is

对于那些不喜欢FitText之类插件的人来说，我只需要查看当前的平均字母宽度(复杂的是:多行，通过临时更改css-width来轻松解决)，就可以计算出适合包含元素的字体大小

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

And jQuery:

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

This resizes my fonts in a masonry-style grid

这将调整我的字体在一个梅森风格的网格

#1