門戶中有個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); } } }); }