超出的文字用省略,用…代替

方法一：

<div style="width:200px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
border:1px solid
#336699">试试看，前面一段我知道，加上...倒还真的不知道，看看效果</div>

方法二：

<table width="550" border="0" cellpadding="5"
cellspacing="1" bgcolor="#007373"
style="table-layout:fixed">

<tr>

<th nowrap bgcolor="#159AA2" style="overflow:hidden;
text-overflow:ellipsis;
color:#FFFFFF;">List1</th>

<th nowrap bgcolor="#159AA2" style="overflow:hidden;
text-overflow:ellipsis;
color:#FFFFFF;">List2</th>

<th nowrap bgcolor="#159AA2" style="overflow:hidden;
text-overflow:ellipsis;
color:#FFFFFF;">List3</th>

</tr>

<tr>

<td nowrap bgcolor="#E8FFFF" style="overflow:hidden;
text-overflow:ellipsis;">用CSS实现超长字段被省略的简单方法</td>

<td nowrap bgcolor="#E8FFFF" style="overflow:hidden;
text-overflow:ellipsis;">用CSS实现超长字段被省略的简单方法</td>

<td nowrap bgcolor="#E8FFFF" style="overflow:hidden;
text-overflow:ellipsis;">用CSS实现超长字段被省略的简单方法</td>

</tr>

</table>