//当要显示的文本内容过多时,用省略号表示(由overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 这三个属性设置);当鼠标定位到该处时,又可完整显示出来(由title属性设置)
<html>
<body>
<h3>This is a header</h3>
<p>This is a paragraph.</p>
<style>
.ellipsis_div{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
</style>
<div class=ellipsis_div
style="width:120px;background-color:#cc88ff;" title="somelongtextsomelongtext">somelongtextsomelongtext</div>
<div class=ellipsis_div
style="width:110px;background-color:#dddddd;">some long text</div>
</body>
</html>
//当列的内容过多时,用省略号表示,当鼠标定位到该处时,又可完整显示出来
/*注意,不能直接在<td>里面添加那些属性,例如<td style="width:120px;background-color:#cc88ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="somelongtextsomelongtext"> ,要在<td>下在使用<div>来设置。*/
<html>
<body>
<h3>This is a header</h3>
<p>This is a paragraph.</p>
<table>
<td>
<div style="width:120px;background-color:#cc88ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="somelongtextsomelongtext">
somelongtextsomelongtext
</div>
</td>
<td>
<div style="width:110px;background-color:#dddddd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="some long text">some long text</div>
</td>
</table>
</body>
</html>