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>

<强> Fiddle Demo

通过jQuery动态更改字体大小

2 个答案: