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

为什么80%的码农都做不了架构师？>>>   

门户中有个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);
            }
        }
        
        
    });
}

转载于:https://my.oschina.net/scoder/blog/477119