JQuery:根據窗口大小自動剪裁標題長度

門戶中有個Portlet的寬度設置爲百分比,能夠根據窗口大小變化。而內容就是新聞公告,標題有時N長,原先經過自定義標籤剪裁,這種方式帶來的問題就是,用戶若是把窗口放大了,而標題不會自動變長點。app

因而有了如下想法:ide

在每一個a標籤保存原標題,而後經過JS檢測a標籤的父元素的寬度與自身寬度對比,輸出合適長度的標題(這裏指寬度是頁面上的像素寬度)。關鍵點:先向頁面上輸出一箇中文字符ascii字符,分別取得二者實際寬度,而後循環每一個標題的每一個字符,截取合適長度的標題。this

這個辦法處理過的標題會根據窗口大小變化而變化,會美觀一點吧。
spa

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);
            }
        }
        
        
    });
}
相關文章
相關標籤/搜索