前段时间遇到一个效果处理,需要将table中超长的内容转换给….,原内容在鼠标hover时展示。目前css3提供一个属性ellipsis ,但是ellipsis对浏览器特别挑。所以用js写一个跨浏览器的ellipsis效果。
效果展示:
核心代码:
/*
* @param tdSelector :
td's selectror , if selector is null ,then all <td> tags will be add ellipsis's effect.
*/
function tableEllipsis(tdSelector){
var td = tdSelector;
if(!td){
td = "td";
}
$(td).each(function(){
if($(this).children().length == 0){
//td's content
var text = $.trim($(this).text().replace(/\s+/g,""));
//add tds' title
$(this).attr("title",text);
//calcute tds' width
var width = $(this).width(); //the developed width of <td> tag
var strWidth = getStringWidth(text); //the developed width of <td>'s content
var ellipsisWidth = getStringWidth("..............") //the developed width of "..............", NB: string "............" must has more than three ellipsis
if(strWidth > width){
var offet = (strWidth-width + ellipsisWidth) / strWidth ;
text = text.substring(0 , text.length * (1-offet))+"...";
}
this.innerHTML = "<nobar>"+text+"</nobar>";
}
});
}
function getStringWidth(text){
var span = $("#tempStrWidth");
if(span.length == 0){
span = "<span id='tempStrWidth' style='z-index:-999;visibility:hidden;'>"+text+"</span>";
$("body").append(span);
}else{
$("#tempStrWidth").html(text);
}
var result = $("#tempStrWidth").outerWidth(true);
$("#tempStrWidth").html("");
return parseInt(result);
}
调用方式:
<script type="text/javascript">
$(document).ready(function() {
var tdSelector = "table[id='ellipsis'] td";
//add ellipsis to <td> tags
tableEllipsis(tdSelector);
});
</script>