js根据字符串长度控制字体大小

使用js库: mootools
应用场景:有时需要在一行显示一个用户的昵称,但是由于昵称的长度不定,所以一旦规定死了font-size,就会出现自动换行等破坏页面美观的情况出现,那么在此种情况下我们可以先判断下字符串的“占空比”.
前端的节点信息:

<h4 class="info-heading"><?=$weibo_uname?></h4>

那么怎么计算所谓的占空比呢,因为会夹杂着出现中文和英文,但是如果仅仅计算 string.length是不可行的,因为 “我爱你中国”.length和’aaaaa’.length都是5,但是在页面所占的长度是不同的,那么应景的我们就需要计算得到一个字符串中包含中文的字数,一个函数

function cLength(str){
  var reg = /[^\u4E00-\u9FA5\uf900-\ufa2d]/g;  
  var temp = str.replace(reg,'');
  return temp.length;
}

那么根据经验,一个中文占的长度是一个数字或者英文字母的两倍,此时我们就可以得到

function check_nick_name()
{
    var myname = $$('[class=info-heading]')[0].innerHTML;//选择器读取字符串
    var string_length = parseInt(myname.length);//总长度
    var chinese = cLength(myname);//中文字数
    var other = string_length - chinese;//英文或者数字数
    var total_length = chinese*2+other;//中文字权重*2 ,算比例
    //6 26px//我的比例,一行只能显示6个汉字,当7个字需要设置font-size为26px才能显示到一行
    if(total_length>=12) {
        var set_font_size = 26/(total_length/12);
        $$('[class=info-heading]')[0].setStyle('font-size',set_font_size);//添加一个font-size属性
    }
}

此时再页面的底部加上首次加载的渲染

<script type="text/javascript">
window.addEvent('domready',function(){
check_nick_name();
});

就可以自动的完成调整了~