文字的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('');
});