文字的font-size大小根据个数不同自动变化实例页面

回到相关文章 »

效果:

代码:

CSS代码:
.box span {
    font-size: 40px;    
}
.box span:first-child:nth-last-child(n+13),
.box span:first-child:nth-last-child(n+13) ~ span {
    font-size: 30px;    
}
.box span:first-child:nth-last-child(n+17),
.box span:first-child:nth-last-child(n+17) ~ span {
    font-size: 20px;    
}
.box span:first-child:nth-last-child(n+25),
.box span:first-child:nth-last-child(n+25) ~ span {
    font-size: 14px;    
}
HTML代码:
<textarea id="textarea" rows="5" placeholder="输入文字,看下面实时效果"></textarea>
<p id="box" class="box"></p>
JS代码:
textarea.addEventListener('input', function () {
    box.innerHTML = this.value.split('').map(function (char) {
        return '<span>' + char + '</span>';
    }).join('');
});