根据字数设置字体大小

最新推荐文章于 2024-09-20 19:13:48 发布

cunqu9743

最新推荐文章于 2024-09-20 19:13:48 发布

阅读量1.7k

点赞数

文章标签： js java python css jquery ViewUI

在我的小型Quotes on Design项目中，有些报价比其他报价更长。我认为增加短引号的字体大小并减小长引号的大小可能是很不错的选择，因此它们在屏幕上所占的大小都匹配得更好。

我不是使用每个引号中的硬编码数字来执行此操作，而是使用JavaScript来执行此操作。这样可以轻松地进行调整，并很好地将内容和演示文稿分开。

计划

设置您要定位的段落的对象
将段落分成单词数组，在每个空格处中断
计算数组的长度
根据该计数设置字体大小。

用MooTools来做

window.addEvent('domready',function() {
	
	$quote = $$('.post p')[0];
    
        var $numWords = $quote.get('text').split(' ').length; 
    
        if (($numWords >= 1) && ($numWords < 10)) {
                $quote.setStyle('font-size','36px');
        }
        else if (($numWords >= 10) && ($numWords < 20)) {
                $quote.setStyle('font-size','32px');
        }
        else if (($numWords >= 20) && ($numWords < 30)) {
                $quote.setStyle('font-size','28px');
        }
        else if (($numWords >= 30) && ($numWords < 40)) {
                $quote.setStyle('font-size','24px');
            }
        else {
                $quote.setStyle('font-size','20px');
        };
});

用jQuery做到这一点

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