table表格中文字溢位部分用省略號表示
阿新 • • 發佈：2019-02-18
1.table表格想要設定文字溢位操作可按照如下方法
table{
width: 100%; 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"。
text-overflow取值為
clip 修剪文字。
ellipsis 顯示省略符號來代表被修剪的文字。
string 使用給定的字串來代表被修剪的文字。
所有主流瀏覽器都支援 text-overflow 屬性。
white-space取值為
normal 預設。空白會被瀏覽器忽略。
pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標籤。
nowrap 文字不會換行，文字會在在同一行上繼續，直到遇到 <br> 標籤為止。
pre-wrap 保留空白符序列，但是正常地進行換行。
pre-line 合併空白符序列，但是保留換行符。
inherit 規定應該從父元素繼承 white-space 屬性的值。
註釋：任何的版本的 Internet Explorer （包括 IE8）都不支援屬性值 "inherit"。
注意：如果表格中有th和td標籤，必須都設定寬度，如果給th設定寬度，td寬度不設定，那麼設定table-layout:fixed;文字溢位生效後，td寬度將失效。
2.設定滑鼠移動到上面顯示全部內容，（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進行操作文字內容會超出表格，不換行。