javascript - 通过jQuery动态更改字体大小

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

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

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

最佳答案

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

});

关于javascript - 通过jQuery动态更改字体大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27737720/