通过jQuery动态更改字体大小

Question

我有JSON格式的数据，我需要在Web浏览器上呈现数据。 我将需要在其中渲染文本的许多div容器。 所有div容器的尺寸可能不同。 该div容器中的文本也将是动态的。 我需要以这样一种方式设置字体大小，即文本应足够大，以便在div容器内占据尽可能多的空间，并且文本也不应被剪切。

这里的挑战是文本长度。 如果是较大的文本，则字体大小应自动减小，以使它仍然适合div容器，而不会剪切数据。

请让我知道是否有任何方法可以实现这一目标。

Answer 1

CSS技巧再次来袭 ： http : //css-tricks.com/set-font-size-based-on-word-count/

通过该链接，您可以检测/设置字数限制，然后添加适合的内联字体大小声明：

$(function(){

var $quote = $(".post p:first");

var $numWords = $quote.text().split(" ").length;

if (($numWords >= 1) && ($numWords < 10)) {
    $quote.css("font-size", "36px");
}
else if (($numWords >= 10) && ($numWords < 20)) {
    $quote.css("font-size", "32px");
}
else if (($numWords >= 20) && ($numWords < 30)) {
    $quote.css("font-size", "28px");
}
else if (($numWords >= 30) && ($numWords < 40)) {
    $quote.css("font-size", "24px");
}
else {
    $quote.css("font-size", "20px");
}    

});

Answer 2

您可以使用jQuery TextFill

这个jQuery插件会调整文本大小以使其适合容器。 字体大小变大

官方网站上的用法：

记住要包括jQuery和jQuery TextFill：

<script src="jquery.min.js"></script>
<script src="jquery.textfill.min.js"></script>

选择要使用的元素。 请确保：指定父母的宽度和高度。 默认情况下，将文本放在子级中（请参阅“选项”进行更改）

<div id='my-element' style='width:100px;height:50px;'>
  <span>The quick brown fox jumps over the lazy dog</span>
</div>

初始化jQuery TextFill

 <script>
$(function() {
    $('#my-element').textfill({

    });
});
</script>

小提琴演示