table表格中文本溢出text-overflow:ellipsis使用中td表格宽度失效问题

1、一般文本超出宽度可进行如下设置：

width:300px;
overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

注意：需要设置文本溢出的容器必须设置宽度。
其中：
text-overflow取值为
clip 修剪文本。     
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。

所有主流浏览器都支持 text-overflow 属性。

white-space取值为
normal     默认。空白会被浏览器忽略。
pre     空白会被浏览器保留。其行为方式类似 HTML 中的

 标签。
 nowrap     文本不会换行，文本会在在同一行上继续，直到遇到 
 标签为止。
 pre-wrap    保留空白符序列，但是正常地进行换行。
 pre-line   合并空白符序列，但是保留换行符。
 inherit   规定应该从父元素继承 white-space 属性的值。

 注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

2、table表格想要设置文本溢出操作可按照如下方法

 table{

 table-layout:fixed;

 }

 注意：table必须设置table-layout:fixed;属性，文本溢出设置才能生效；

 td{

 width:300px;
 overflow: hidden;

 white-space: nowrap;

 text-overflow: ellipsis;

 }

 其中：table-layout取值为：

 automatic     默认。列宽度由单元格内容设定。
 fixed     列宽由表格宽度和列宽度设定。
 inherit     规定应该从父元素继承 table-layout 属性的值。

 注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

 
  
注意：如果表格中有th和td标签，必须都设置宽度，如果给th设置宽度，td宽度不设置，那么设置table-layout:fixed;文本溢出生效后，td宽度将失效。
 
  
3、设置鼠标移动到上面显示全部内容，

 （1）非table表格可直接使用：hover进行相应设置

 （2）table表格利用js设置方法

 $(".list").delegate("td","mouseover",function(){
         $("table").css("table-layout","automatic");
         $(this).css({"white-space":"pre-wrap","overflow":"visible"});
     });

 $(".list").delegate("td","mouseout",function(){
         $("table").css("table-layout","fixed");
         $(this).css({"text-overflow":"ellipsis","white-space":"nowrap","overflow":"hidden"});
     });

table表格中重点为设置table{table-layout:automatic}，用hover进行操作文本内容会超出表格，不换行。