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

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，而不改变所示箭头块的尺寸大小（文本大小可以更改但不要更改块大小）。箭头块必须像样例箭头一样，并且我遇到了variation2中显示的问题。请问有人能帮助我吗？

- user2613399

---

如果您乐意使用插件，那么http://fittextjs.com/是一个不错的选择。 - Grim...

可能有帮助：https://dev59.com/dXRB5IYBdhLWcg3wNk93 - Adam Marshall

关于CSS箭头，它们很好看，但我会做一些其他的事情——比如添加一个额外的div/span，而不是依赖CSS。 - Richard

Answer 1

尝试使用 jQuery 插件 FITTEXT ，这可以帮助你。

- Sobin Augustine

---

这个插件能否给我想要的结果，即在文本适合箭头块时不缩小箭头块的尺寸，包括指向性（三角形）部分。很抱歉问这个问题，因为我从未使用过插件，这将是我第一次使用。 - user2613399

是的，我没有在你的代码上尝试过，但是当div变大和缩小时，它可以调整字体大小以适应其中。 - Sobin Augustine

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提供的链接）}

- Richard

---

不使用插件，只使用JavaScript，如何在不改变箭头块的尺寸的情况下实现此操作（正如您在fiddle中看到的那样，箭头块的大小减小了）（假设示例文本中给出的块的实际大小）。 - user2613399

@user2613399 使用CSS来创建箭头不是我会采取的方向。那些箭头是页面上可显示的项目。我会将div或span制作成这样，以便您可以更好地控制它们。 - Richard

你能否给我提供一个关于这个概念的示例fiddle？ - user2613399

@user2613399 在jsfiddle上尝试将不同的div分别进行样式设计。这还需要进一步完善，但这就是基本思路。 - Richard

@user2613399 哦，顺便说一下，只有底部的那个有单独的div。我没有对顶部的那个做同样的处理。 - Richard

让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/36097/discussion-between-user2613399-and-richard - user2613399

Answer 3

对于那些不喜欢像FitText这样的插件的人，我刚刚尝试了一下，通过查看当前平均字母宽度（复杂性：多行，在此通过暂时更改CSS宽度来滑稽地解决）计算字体大小以适应包含元素。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);
});

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

- Creative Choice