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中就可以实现上面的需求了，确实相比于第一种类的方法省了很多事情。