JQuery：根据窗口大小自动剪裁标题长度

摘要: 根据窗口大小自动剪裁标题长度

门户中有个Portlet的宽度设置为百分比，可以根据窗口大小变化。而内容就是新闻公告，标题有时N长，原先通过自定义标签剪裁，这种方式带来的问题就是，用户如果把窗口放大了，而标题不会自动变长点。

于是有了以下想法：

在每个a标签保存原标题，然后通过JS检测a标签的父元素的宽度与自身宽度对比，输出合适长度的标题（这里指宽度是页面上的像素宽度）。关键点：先向页面上输出一个中文字符ascii字符，分别取得两者实际宽度，然后循环每个标题的每个字符，截取合适长度的标题。

这个办法处理过的标题会根据窗口大小变化而变化，会美观一点吧。

var w_cn,w_ansi;
$(document).ready(function(e) {
var span_CN=$('<span>一</span>');
var span_ANSI=$('<span>1</span>');
$('body').append(span_CN).append(span_ANSI);
w_cn=span_CN.width();
w_ansi=span_ANSI.width();
span_CN.hide();
span_ANSI.hide();

$(window).resize(function(e) {
fixTitle();
});

fixTitle();
});
function fixTitle(){
$('a[original]').each(function(index, element) {
var a=$(this),txt=a.attr('original'),a_par_w=a.parent().width(),a_w=a.width(),new_txt='',new_len=0;

for(var i=0;i<txt.length;i++){
new_txt+=txt[i];
if (txt[i].match(/[^\x00-\xff]/ig) != null) {
new_len+=w_cn;
}else new_len+=w_ansi;
if(new_len>a_par_w-40){
a.text(new_txt+'...');
break;
}
if(i+1==txt.length){
a.text(txt);
}
}

});
}