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);
            }
        }
        
        
    });
}


你可能感兴趣的:(JavaScript,jquery,截取标题)