描述:脚本内容实现,tr单元格由于文本内容过宽影响整体样式问题。
效果:自定义宽度,单元格超出字符显示省略号,并且鼠标双击可复制全部内容(原文本不包含省略号)鼠标移动到省略文本的单元格上方,显示全部文本内容的浮动框,从而不影响文本的正常浏览。
使用:脚本需要jquery支持,请先引入jquery文件,在需要控制宽度的tr中设置属性class="ellipsis" 并指定"width"宽度属性(不指定宽度则根据js中widthDef的默认设置)
页面参考源码:
<td class="ellipsis" width="105px">${name}</td>
页面效果:
<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>
$(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)); }); } });