H5中利用jquery控制表格隐藏多余字符

1.页面效果

<td class="ellipsis" title="Sky Gamblers: Storm Raiders">

    <div style="width: 105px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; ">Sky Gamblers: Storm Raiders</div>

</td>

2.js代码

$(function(){  

// 查找TD下指定class="ellipsis"属性添加标签样式自动隐藏超出框度的字符  

     // 查找表格中tr属性是否包含ellipsis的class  

    if($("tr .ellipsis").length>0){  

                // 遍历找到对象进行操作  

        $("tr .ellipsis").each(function() {  

                        // 设置默认宽度  

            var widthDef = "105px";  

                        // 由于tr标签不支持隐藏属性设置所以创建DIV来完成预期效果  

            var div = document.createElement("div");  

            // 获取表格文本内容  

            var txt = $(this).html();  

            // 设置提示文本(当鼠标移动到所在TD的单元格有浮动文本框提示完整的文本内容)  

            $(this).attr("title",txt);  

            // 指定宽度(获取TR的宽度实现不同单元格的自定义宽度，如果未设置则默认15%)  

            if(typeof($(this).attr("width")) != "undefined"){  

                widthDef = $(this).attr("width");  

            }  

                        // 动态创建隐藏超出宽度的样式  

            $(div).css({"width":widthDef,"overflow":"hidden","text-overflow":"ellipsis","white-space":"nowrap"});  

                        // 将动态生成带样式的DIV放回原来的标签中  

            $(this).html($(div).html(txt));  

        });  

    }  

});  

原文链接：http://gyx001.iteye.com/blog/1861214