根据字数设置字体大小

在我的小型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");
    }    
	
});

例子

Quotes on Design使用的是jQuery版本。 这里的 MooTools 示例 (请注意代码中的一些细微更改,以在一页上容纳两个引号)。 这是我第一次真正使用MooTools。 我很高兴了解更多。 我显然在这里以jQuery为中心,但是绝对不是唯一的障碍。 谢谢@mootools

翻译自: https://css-tricks.com/set-font-size-based-on-word-count/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值