CSS實現文字超出長度隱藏,顯示省略號

CSS實現文字超出長度隱藏,顯示省略號

表格：

table{
　　table-layout: fixed;
}
td{
 　 white-space: nowrap;
　　overflow: hidden;
　　text-overflow: ellipsis;
}

本方法用於解決表格單元格內容過多時的美觀問題，主要涉及到4句CSS樣式：

1. table-layout: fixed 因爲table-layout的默認值是auto，即table的寬高將取決於其內容的多寡，若是內容的體積沒法估測，那麼最終表格的呈現形式也沒法保證了，fixed一下就行了。（注意：此樣式是關鍵）

2. white-space: nowrap 是爲了保證不管單元格（TD）中文本內容有多少，都不會自動換行，此時多餘的內容會在水平方向撐破單元格。

3. overflow: hidden 隱藏超出單元格的部分。

4. text-overflow: ellipsis 將被隱藏的那部分用省略號代替。