html5控制字大小的代码,js根据字符串长度控制字体大小代码

使用js库: mootools

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

前端的节点信息:

=$weibo_uname?>

那么怎么计算所谓的占空比呢，因为会夹杂着出现中文和英文，但是如果仅仅计算 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属性

}

}

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

window.addEvent('domready',function(){

check_nick_name();

});

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