HTML：table中的td文字隐藏并实现hover显示全部文字

需求：

• 1.table中td中的过长的文字隐藏起来;
• 2.然后hover可以实现显示全文。

实现：

方法一：
通过百度，找到了一种传统的实现方法，将两个需求分开实现；
- 通过css将需求1实现:

.mytable {  
    table-layout: fixed;  
}  

.mytable tr td {  
    text-overflow: ellipsis; /* for IE */  
    -moz-text-overflow: ellipsis; /* for Firefox,mozilla,在chrome中测试也通过了*/  
    overflow: hidden;  
    white-space: nowrap;  
}  

• 通过js将需求二实现，逻辑上就是实现mousehover与mouseout事件，这里就不实现代码了，百度一下就可以了。

---

方法二
一种推荐的简便方法，利用td的属性title显示全部文本，然后切割全部文本字符串

var myHtml;
if (myStr!=null && myStr.length > 10) {//按照长度10切割
    var strClip =myStr.substring(0, 10) + '...';
    myHtml = '<td title="' + myStr + '">' + strClip + '</td>';
} 
else {
    myHtml = '<td>' + myStr  + '</td>';
}

然后将myHtml添加到table中就可以实现上面的需求了，确实相比于第一种类的方法省了很多事情。