cp from : https://blog.csdn.net/bsh_csn/article/details/51829103
html的table表格中td長度固定，當內容過長時，超過部分用省略號代替. 具體代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.mytable {
table-layout: fixed;
width: 98% border:0px;
margin: 0px;
}
.mytable tr td {
text-overflow: ellipsis; /* for IE */
-moz-text-overflow: ellipsis; /* for Firefox,mozilla */
overflow: hidden;
white-space: nowrap;
border: 1px solid;
text-align: left
}
</style>
</head>
<body>
<table width="500px" class="mytable">
<tr>
<td width="20%">測試</td>
<td width="80%">測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試123123</td>
</tr>
</table>
</body>
</html>
table的width一定要設置, 不然會出現文字太多時變形的情況.
注釋:
原理：
本方法用於解決表格單元格內容過多時的美觀問題，主要涉及到4句CSS樣式：
-
table-layout: fixed 由於table-layout的默認值是auto，即table的寬高將取決於其內容的多寡，如果內容的體積無法估測，那么最終表格的呈現形式也無法保證了，fixed一下就好了。（注意：此樣式是關鍵）
-
white-space: nowrap 是為了保證無論單元格（TD）中文本內容有多少，都不會自動換行，此時多余的內容會在水平方向撐破單元格。
-
overflow: hidden 隱藏超出單元格的部分。
-
text-overflow: ellipsis 將被隱藏的那部分用省略號代替。
兼容性：
Internet Explorer 6, 7, 8, 9及以上版本
FireFox 最新版
Chrome 最新版