通過樣式可以使在table中如果td中的內容過長時,過長的部分顯示為省略號。
如下圖所示:
樣式也很簡單,代碼如下:
<!DOCTYPE html>
<html>
<head>
<title>New Document </title>
<style>
.ctl {
table-layout: fixed;
}
.ctl td {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding: 2px;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="1" width="100%" class="ctl" border="1">
<colgroup>
<col>
<col width="100">
</colgroup>
<tbody>
<tr>
<td>內容還不算很長很長</td>
<td>內容比較短</td>
</tr>
<tr>
<td>內容很長很長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長</td>
<td>內容比較短</td>
</tr>
<tr>
<td>內容很長很長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長</td>
<td>內容比較短</td>
</tr>
<tr>
<td>內容很長很長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長</td>
<td>內容比較短</td>
</tr>
</tbody>
</table>
</body>
</html>
現在的實現在IE8或者9下,如果以內容字母開頭,顯示效果就會出現不一致的情況。效果如下:
看來IE自動識別的字體。
如果為設置字體后呢,先設置為font-family:宋體;效果如下:
設置為font-family:Arial;效果如下:
如果要想保證效果統一,必須要設置字體,而且必須要設置為中文字體了。




